>

방금 자바 스크립트 학습을 마쳤습니다. 이제 나는 내 지식을 더 선명하게하기 위해 실용적인 테스트를하고 있습니다. 온라인에서 임의의 실제 프로젝트를 찾고이 사이트를 찾았습니다 ( https://skillcrush.com/2018/06/18/projects-you-can-do-with-javascript/ ) 9. JavaScript 할 일 목록을 만듭니다.

코드를 스캔 할 때 흐름이 어떻게 작동하는지 이해하지만이 특정 섹션에서 혼란스러워했습니다 :

* createListElement () 함수가 트리거 될 때마다 li 요소의 배열을 생성합니까?

* 모든 'li'에 대해 생성 된 삭제 버튼은 해당 특정 li 요소에서만 작동하도록 어떻게 연결됩니까?


  • 답변 # 1

    와이즈 비즈  이 함수는단일목록 요소를 만듭니다. 이것이하는 일입니다.

    요소를 만듭니다.

    목록에 추가합니다.

    취소 선을 추가합니다.

    삭제 버튼을 추가합니다.

    삭제 버튼은 목록 항목의자식 요소입니다. 그것은 onclick 리스너에서 특정 createListElement() 를 저장합니다.  그것이 속한 요소. 해당 영역에서 더 이상적인 코드는 다음과 같습니다.

    li
    
    

    모든 onclick 이벤트에서 function deleteListItem(e) { e.path[0].parentElement.classList.add("delete") } dBtn.addEventListener("click", deleteListItem)  클릭 한 요소입니다. 삭제 버튼에는 해당 기능을 트리거하는 자식이 없으므로 항상 삭제 버튼이됩니다. 그런 다음 상위 요소를 가져 와서 항상 올바른 목록 항목이됩니다.

  • 답변 # 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?

관련 자료

  • 이전 input - 스레드"main"javautilInputMismatchException의 예외이며 왜 그런지 모르겠습니다
  • 다음 html - 왜 배경 그림 위에 홈페이지에서 패널을 볼 수 없습니까?