javascript - 为什么我不能切换类(class)？

Question

我正在处理一个小的待办事项列表，您可以添加新任务，然后当您单击 li 元素时，它应该添加 2 个类并删除 1 个

<ul id="myUL" class="todoList">
    <li class='todoList card border-primary'>my li</li>
</ul>

这是我用于切换类的 js 代码

$( "#myUL" ).children().on("click",function() {  
    $( this ).toggleClass( "checked" );
    $( this ).toggleClass( "border-primary" );
    $( this ).toggleClass( "border-success" );                                                                              
});

我将它包含在底部 bootstrap.min 和 jquery-3.3.1.min js 文件中，因为它依赖于 bootstrap。

但我的代码仅适用于第一个元素。我该如何解决它？

Answer 1

这只适用于第一个元素，因为您只运行一次 JS 代码来附加事件监听器。因此，只有第一个元素附加了“click”事件监听器。您可以向父级添加一个监听器，然后从那里处理它。或者，替代方法是删除所有 li 的所有事件监听器，然后使用您现在拥有的代码重新添加它们。这不是一个好的做法，但可以完成工作。这是 w3schools 的示例

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

来源:https://www.w3schools.com/howto/howto_js_todolist.asp