Question

请你看看This Demo，让我知道为什么.toggleClass()没有在这里结束？

$(function() {
    $("#cluster-box").on("click", function () {
       $('#cluster-info').toggleClass("fa-th-large fa-fax");
    });
});

<div class="container">
 <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default btn-sm navbar-btn">Left</button>
  <button type="button" class="btn btn-default btn-sm navbar-btn">Middle</button>
  <label class="btn btn-default btn-sm navbar-btn" id="cluster-box"> <input type="checkbox" id="cluster" class="hidden" checked=""><i id="cluster-info" class="fa fa-fax"></i></label>    
</div>
</div>

Answer 1

每次点击，您的事件处理程序都会被触发两次。首先是复选框，然后再冒泡到#cluster-box。结果，这些类被切换两次，因此你没有看到任何区别。

$("#cluster-box").on("click", function (_event) {
    console.log('handler triggered!');
    $('#cluster-info').toggleClass("fa-th-large fa-fax");
});

使用上面的console.log()，您将能够看到处理程序被触发两次。

而不是在click上收听#cluster-box，而在change上收听#cluster事件将解决此问题。 Demo

$("#cluster").on("change", function (_event) {
    $('#cluster-info').toggleClass("fa-th-large fa-fax");
});

jQuery Toggle类不起作用

1 个答案: