如何避免使用动态创建的元素多次循环 - pure Javascript

Question

我正在构建一个仅使用 javascript 的简单待办事项列表。我知道如何使用 jQuery.

获得预期的结果

我创建了一个函数，可以在已完成的任务中添加一条线作为文本装饰。

为此，我正在尝试 select 使用 querySelectorAll 动态添加的“li”元素。然后，通过 selection 循环，我添加了一个 addEventListener，其“点击”切换直通效果。

每次在待办事项列表中添加新的“li”元素时，我都会调用此类函数。

因此，随着列表中“li”元素数量的增加，循环运行并多次触发事件。

如果循环次数为奇数，则 objective 为“已实现”。但是，自然地，运行偶数次它不起作用。

有没有办法使用for循环来解决这种情况？如果不是，仅使用纯 javascript.

获得预期结果的最佳实践是什么？

const arrTask = [];

    let insertTask = document.querySelector("input");
    insertTask.addEventListener("keydown", e => {
      if(e.keyCode === 13){
        arrTask.push(insertTask.value);
        insertTask.value = "";
        listTasks()
        e.preventDefault();
      }
    })
    
    const getUlist = document.querySelector("ul");
    
    function listTasks(){
      // Add task to the list
        let task = document.createElement("li");
        task.innerHTML = `${arrTask[arrTask.length-1]}<button class="btn btn-danger deletable"><i class="fa fa-trash"></i></button>`
        getUlist.appendChild(task);
        task.classList = "list-group-item list-group-item-action taskContainer d-flex justify-content-between align-items-center";
        markTasks();
        deleteButton();
    }
    
    function markTasks(){
      // Mark done tasks
      let listItem = document.querySelectorAll(".taskContainer");
      for(item of listItem){
        item.addEventListener("click", function(){
        this.classList.toggle("mark")
        console.log(this)
        })
      }
    }

我的代码： https://codepen.io/minatogawa/pen/oNbOqXp?editors=0011

Answer 1

在更改 html DOM 时，请尽量关注实际对象。如果您维护对对象的引用，则更新和删除它们会容易得多，并且不需要搜索。它还使代码更小、更清晰。

这是您的任务列表的更新代码：

// Pure JS
const arrTask = [];

const nowUSee = () => {
  let addNew = document.querySelector(".fa-plus");
  let getInput = document.querySelector(".typeTask")
  addNew.addEventListener('click', () =>{
    getInput.classList.toggle("d-none")
  })
}
nowUSee();

let insertTask = document.querySelector("input");
insertTask.addEventListener("keydown", e => {
  if(e.keyCode === 13){
    addTask(insertTask.value);  // append task object to list
    insertTask.value = "";  // reset text field
    e.preventDefault();  // prevent submit
  }
})

const getUlist = document.querySelector("ul");  // todo list

function addTask(txt) {
  let task = document.createElement("li");  // create task html element
  task.innerHTML = `${txt}<button class="btn btn-danger deletable"><i class="fa fa-trash"></i></button>`  // text and delete button
  getUlist.appendChild(task);  // add task element to list element
  task.classList = "list-group-item list-group-item-action taskContainer d-flex justify-content-between align-items-center"; // classes for task element
  task.addEventListener("click", function(){  // add event for toggling strikethrough
        this.classList.toggle("mark")  // class for strikethrough
  })
  task.children[0].addEventListener('click', function(){  // add button event for deleting task
      getUlist.removeChild(task)
    })
}

如何避免使用动态创建的元素多次循环 - pure Javascript

How to avoid looping multiple times with dynamically created elements - pure Javascript

javascript

loops

for-loop

toggle