javascript - jQuery toggleClass 不适用于标签

Question

为什么 toggleClass() 不能与标签元素一起使用？我该如何解决？

如果您只点击标签(而不是复选框)，您会看到颜色没有改变。

jsFiddle

$(document).ready(function() {
  $('.filter-set label').click(function() {
    $(this).toggleClass('active');
  });
});

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter-set">
  <ul>
    <li><label><input name="checkbox" type="checkbox"> label 1</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 2</label></li>
    <li><label><input name="checkbox" type="checkbox"> label 3</label></li>
  </ul>
</div>

Answer 1

您只需要更改 事件绑定(bind)而不是click

$('.filter-set label').change(function() {
    $(this).toggleClass("active");
  });

工作示例:http://jsfiddle.net/DinoMyte/8gz0jsnq/5/

解释:

事实证明，当您在标签上单击 时，它还会调用 input:checkbox 上的 click 事件(因为嵌套元素包装)。因此，标签上的第一个事件确实正确设置了类 'active'，但是 checkbox 上的后续点击事件将其切换回 empty (基本上删除了类“active”)。

上面提到的效果可以在这里看到:http://jsfiddle.net/DinoMyte/8gz0jsnq/6/

绑定(bind) change 事件只会触发一次事件(仅适用于 checkbox )，这将正确切换类。