Question

我正在使用bootstrap复选框按钮来创建一个按钮组。当用户点击其中一个按钮时，它会变为活动状态。

我使用下面的函数检查哪个按钮处于活动状态，哪个按钮处于活动状态，然后在函数的其余部分使用此数据。

正如您在jsfiddle中看到的那样，结果会延迟，如果我将is更改为was，这将是正确的。但我需要在我正在使用的函数中进行测试，而不是在下次调用函数时。

有人可以向我解释为什么会发生这种情况，以及我的hasClass检查是否适用于这种情况？

HTML：

<div class="box btn-group" data-toggle="buttons-checkbox">
    <button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
    <button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>

CSS：

$(".box").on('click', function(){
    alert("a is " + ($("#a").hasClass("active") ? "active" : "not-active"));
    alert("b is " + ($("#b").hasClass("active") ? "active" : "not-active"));
});

jsfiddle

Answer 1

Twitter Bootstrap自动绑定在document级别工作，这意味着click级别的.box事件仍然不知道按钮状态的变化。

您可以删除自动绑定，删除此组复选框的data-toggle属性，并使用Twitter Bootstrap API中记录的.button()。

<div class="box btn-group">
    <button data-filter="a" id="a" name="button" type="button" class="btn">A</button>
    <button data-filter="b" id="b" name="button" type="button" class="btn">B</button>
</div>

$(".box").on('click', '.btn', function(){
    $(this).button("toggle");    
    alert("a is " + ($("#a").hasClass("active") ? "active" : "not active"));
    alert("b is " + ($("#b").hasClass("active") ? "active" : "not active"));
});

See it here.

jQuery - 一个按钮的hasClass与延迟一起工作

1 个答案: