Javascript 为什么我能'；t切换类？

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

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

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

---

但是我的代码只对第一个元素起作用。我怎样才能修好它

你试过这样的东西吗

$("#myUL li").click(function() {  
                   $(this).toggleClass("checked");
                   $(this).toggleClass("border-primary");
                   $(this).toggleClass("border-success");

  });

---

这只适用于第一个元素，因为您只需运行一次JS代码来附加eventlisteners。因此，只有第一个元素附加了“click”eventlistener。 您可以将侦听器添加到父级，然后从父级处理它。 或者，替代方法是删除所有li的所有EventListener，然后使用您现在拥有的代码重新添加它们。这不是一个好的做法，但可以完成工作。 这是一个来自W3S学校的例子

// 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);

---

来源：

在我的html文件pooper、jquery和bootstrap中包含3个文件，你的其他

看起来像什么？与此

相同，但内容不同popper是什么？我进行了编辑以使其正确，而您再次使其弹出。您是否在每次添加新元素时都运行JS代码？仍然存在相同的问题？您的意思是为ul创建一个侦听器并选择ui的所有子级？是，然后您可以使用“target”属性来确定事件发生在哪个li标记中occour@OmarSherif我已经对问题进行了编辑，添加了相关代码，如果可行，请接受它作为解决方案。

// 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);