방금 자바 스크립트 학습을 마쳤습니다. 이제 나는 내 지식을 더 선명하게하기 위해 실용적인 테스트를하고 있습니다. 온라인에서 임의의 실제 프로젝트를 찾고이 사이트를 찾았습니다 ( https://skillcrush.com/2018/06/18/projects-you-can-do-with-javascript/ ) 9. JavaScript 할 일 목록을 만듭니다.
코드를 스캔 할 때 흐름이 어떻게 작동하는지 이해하지만이 특정 섹션에서 혼란스러워했습니다 :
* createListElement () 함수가 트리거 될 때마다 li 요소의 배열을 생성합니까?
* 모든 'li'에 대해 생성 된 삭제 버튼은 해당 특정 li 요소에서만 작동하도록 어떻게 연결됩니까?
-
답변 # 1
-
답변 # 2
관련 코드는 다음과 같습니다.
e.path[0]
A1 :
function createListElement() { var li = document.createElement("li"); // creates an element "li" li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text ul.appendChild(li); //adds li to ul input.value = ""; //Reset text input //START STRIKETHROUGH // because it's in the function, it only adds it for new items function crossOut() { li.classList.toggle("done"); } li.addEventListener("click",crossOut); //END STRIKETHROUGH // START ADD DELETE BUTTON var dBtn = document.createElement("button"); dBtn.appendChild(document.createTextNode("X")); li.appendChild(dBtn); dBtn.addEventListener("click", deleteListItem); // END ADD DELETE BUTTON //ADD CLASS DELETE (DISPLAY: NONE) function deleteListItem(){ li.classList.add("delete") } //END ADD CLASS DELETE }
동안 트리거,createListElement
단일var li = document.createElement("li")
를 만들 것입니다 요소,li
에 의해 DOM에 추가A2 :
ul.appendChild(li)
버튼 요소를 만들고var dBtn = document.createElement("button");
에 추가하십시오li
의 요소 .li.appendChild(dBtn)
버튼을 클릭하면 해당 버튼에 클릭 이벤트를 추가하면 정의 된dBtn.addEventListener("click", deleteListItem);
가 트리거됩니다. 기능. 그리고deleteListItem
에서 기능 :deleteListItem
function deleteListItem(){ li.classList.add("delete") }
방금 만든 'li'요소를 나타냅니다. 따라서 그것은li
를 추가합니다 관련delete
클래스 요소와 숨기기li
. -
답변 # 3
li
닫기!ul을 모든li항목의 상위 컨테이너로 생각하십시오. 이 특정 예에는ul이 이미 전역 적으로 정의되어 있습니다 :
*Everytime the createListElement() function is triggered, does it create an array of li element?
매번 createListElemet는 ()는 기존UL용기.
에 대한 새로운리요소 및 추가를 생성 트리거 와이즈 비즈한 번에 코드 라인을 따르는 경우-
var ul = document.querySelector("ul");
How does the delete button created for every 'li' is only associated to work with that specific li element?
관련 자료
- javascript - 특정 요소 배열의 요소 합계 얻기
- c++ - 요소별로 배열 요소를 삭제할 수 있습니까?
- c++ - 배열에서 가장 작은 요소 찾기
- python - 요소의 예상 인덱스가 원래 인덱스가되도록 배열 셔플
- java - 배열의 마지막 요소 만 표시하는 이유는 무엇입니까?
- vue.js - v-for - 배열 요소 및 속성 분해
- javascript - 내 함수에서 무엇을 놓치고 있습니까 (오른쪽 요소보다 큰 요소 배열 반환)?
- python - numpy를 사용하여 배열의 요소에서 위치를 찾을 가능성이 있습니까?
- 자바 스크립트 - 배열의 마지막 요소를 반환하는 함수
- jsonb 열의 json 속성에있는 배열에서 배열 요소 가져 오기
- PHP 배열에서 동일한 날짜를 갖는 요소를 추가하여 새 배열을 형성하는 방법
- 자바 스크립트 배열의 한 요소를 업데이트하면 모든 요소가 업데이트됩니다
- cypress - 요소가 표시 될 때까지 기다리는 방법
- 배열 요소의 모든 숫자가 0 또는 1인지 확인 [c ++]
- r - 3D 배열에 요소를 추가하는 방법은 무엇입니까?
- javascript - for 루프를 Array map ()으로 대체
- c++ - 배열의 가장 낮은 요소 찾기
- c++ - CUDA는 배열 오프셋으로 장치 메모리에서 단일 요소를 복사하는 것이 안전합니까?
- c - 길이, 요소 크기 및 형식을 알고있을 때 printf로 void * 배열을 인쇄하는 방법은 무엇입니까?
- MongoDB 요소 필드를 값 배열로만 변환
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- vue.js - axios를 사용하여 서버에 이미지를 업로드하는 방법
- python - 문자열에서 특정 문자 제거
와이즈 비즈 이 함수는단일목록 요소를 만듭니다. 이것이하는 일입니다.
요소를 만듭니다.
목록에 추가합니다.
취소 선을 추가합니다.
삭제 버튼을 추가합니다.
삭제 버튼은 목록 항목의자식 요소입니다. 그것은 onclick 리스너에서 특정
createListElement()
를 저장합니다. 그것이 속한 요소. 해당 영역에서 더 이상적인 코드는 다음과 같습니다.모든 onclick 이벤트에서
function deleteListItem(e) { e.path[0].parentElement.classList.add("delete") } dBtn.addEventListener("click", deleteListItem)
클릭 한 요소입니다. 삭제 버튼에는 해당 기능을 트리거하는 자식이 없으므로 항상 삭제 버튼이됩니다. 그런 다음 상위 요소를 가져 와서 항상 올바른 목록 항목이됩니다.