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代码来附加eventlisteners。因此，只有第一个元素具有“点击”功能。 eventlistener附加到它。您可以向父级添加侦听器，然后从该处理器处理它。或者，替代方法是删除所有li的所有eventlistener，然后使用您现在拥有的代码重新添加它们。这不是一个好习惯，但会完成工作。这是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

Answer 2

你尝试过这样的事吗？

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

  });

为什么我不能切换课程？

2 个答案: