javascript - 未能对先前事件的元素调用操作

Question

简而言之，我有一个元素列表，其中一个设置为 .active:

<ul>
  <li class="active"></li>
  <li></li>
  <li></li>
</ul>

$("li:not(.active)").click(function() {
  $(this).addClass("active")
    .siblings("li").removeClass("active");
});

https://jsfiddle.net/sasy0faL/

当您单击不是.active 的元素之一时，代码应更改其状态并从其他元素中删除.active 类。

要重现该问题，您需要单击一个非事件元素(例如第二个)，然后尝试单击先前事件的元素(第一个)以使其再次事件。它不会这样做，即使它目前不活跃。有什么想法吗？

Answer 1

那是因为您没有将事件附加到事件元素(使用 li:not(.active))。修改您的代码以将事件附加到所有 li 元素，并且仅在元素没有时添加事件类:

$("li").click(function() {
if(!$(this).hasClass('active'))
  $(this).addClass("active").siblings("li").removeClass("active");
});

Working Demo