使用 javascript 添加选中的类

Question

我尝试使用事件侦听器将检查的类添加到待办事项列表项目中。但事件侦听器并未附加到每个复选框类。这是代码

export default function (){
    const checkedElements = document.querySelectorAll(".checkbox");
    checkedElements.forEach(element => {
        element.addEventListener('click', () => {
            element.classList.toggle('checked');
        });
    });
}

这是网站 https://joyal-jij0.github.io/todo-list/ & 这是仓库 https://github.com/joyal-jij0/todo-list.git。创建 2-4 个待办事项后尝试单击每个复选框。我预计每个复选框都会获取事件侦听器，但有些正在获取，有些正在被删除。

Answer 1

您的代码正在从

checked

调用 那个

addTask

函数。

由于

checked

函数在内部循环所有复选框并添加处理程序，因此它们将具有多个单击处理程序，然后将多次来回切换选中状态。 （如果您将战略性

console.log()

添加到处理程序中，您可以看到这一点。）

您还可以在浏览器检查器的事件监听器列表中看到这些多个处理程序；这是我添加 4 个项目后的第一个复选框。

IOW，您只需为每个新复选框添加一次处理程序。