js遍歷新創建的列表元素的問題

Question

我正在建立一個待辦事項列表項目，並且被困在遍歷新創建的列表項中。

這就是我在做什么：

1. 創建一個數組。
2. 通過循環為數組的每個元素設置li個項，以便數組以列表方式出現。
3. 然后循環遍歷新創建的li節，以在li的每個li上添加addEventListener（但此方法不起作用）。

---

 var arrList = ["play","learn","walk"];
 var list = document.querySelectorAll("li");
 var done = false;

//printing array in list manner
for(let i = 0; i < arrList.length; i++){
    let el = document.createElement("li")
    el.textContent = arrList[i];
    document.querySelector("ul").appendChild(el);
}
//looping through each li's to apply if else statement
 for(let i = 0; i < list.length; i++){
    list[i].addEventListener("click",function(){
        if(!done){
            this.style.textDecoration = "line-through";
            done = true;
        }else{
            this.style.textDecoration = "none";
            done = false;
        }
    })
}

Answer 1

似乎只有一個完成的變量與待辦事項列表上的每個項目共享。 因此，如果您單擊其中一項，則所有項目都將被划掉。 對於待辦事項列表中的每個項目，您將需要一個布爾變量。

Answer 2

您的代碼大部分是正確的，但是有一些問題需要解決。 首先，考慮使用基於forEach()迭代替換您的for循環，如下所示。 通過這種方式使用forEach() ，您可以利用“關閉”功能 ，在這種情況下，可以大大簡化您的代碼。 例如，您可以使用閉包功能將每個項目的done狀態存儲在列表中，而不是將狀態顯式存儲在數組中。

我注意到的另一個問題是var list = document.querySelectorAll("li"); 在將任何li元素添加到文檔之前，先查詢文檔中的li元素-稍后在腳本中，您似乎正在迭代該空查詢結果，並期望它包含添加的li元素。

這是一個有效的代碼段-希望對您有所幫助！

 var arrList = ["play", "learn", "walk"]; // Iterate the list via forEach arrList.forEach(function(arrItem) { // We're now in a new "closure" for this list item // so we can define some state like "done" that will // be used exclusively for this list item var done = false; // Create li element for this list item as before var el = document.createElement("li") el.textContent = arrItem; // Configure click event el.addEventListener("click", function() { // Notice we're able to use the done variable // in this closure for this list item? The key // thing to understand is that each list item // will have it's own unique "done" variable if (!done) { el.style.textDecoration = "line-through"; done = true; } else { el.style.textDecoration = "none"; done = false; } }) document.querySelector("ul").appendChild(el); }); 

 <ul></ul> 

Answer 3

在第二個for循環的上方添加此行，並從頂部刪除 。

var list = document.querySelectorAll("li");

您正在分配列表值，甚至在創建它們之前。

Answer 4

從源代碼中，我看到列表li項目在創建新li項目之前已初始化，
這將導致列表li項目不包含新項目，
由於addEventListener不適用於新項目。

為了解決這個問題，只需要在創建part之后移動init list li項目代碼即可：

    var arrList = ["play","learn","walk"];
    var done = false;

    //printing array in list manner
    for(let i = 0; i < arrList.length; i++){
        let el = document.createElement("li")
        el.textContent = arrList[i];
        document.querySelector("ul").appendChild(el);
    }

    var list = document.querySelectorAll("li");
    //looping through each li's to apply if else statement
    for(let i = 0; i < list.length; i++){
        list[i].addEventListener("click",function(){
            if(!done){
                this.style.textDecoration = "line-through";
                done = true;
            }else{
               this.style.textDecoration = "none";
               done = false;
            }
        })
    }

Answer 5

求求你，簡單點...

 var arrList = ["play","learn","walk"], UL_arrList = document.querySelector("ul") ; arrList.forEach (arrItem => { let el = document.createElement("li"); el.textContent = arrItem; UL_arrList.appendChild(el); el.onclick = function(e){ let deco = this.style.textDecoration || 'none'; this.style.textDecoration = (deco==='none') ? 'line-through': 'none'; } }); 

 <ul></ul>