1

我正在使用引导复选框按钮来拥有一个按钮组。当用户单击其中一个按钮时，它会变为活动状态。

我使用下面的函数来检查哪个按钮是活动的，哪个不是活动的，然后在函数的其余部分使用这些数据。

正如您在 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

4

1 回答 1

2

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

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

<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"));
});

看这里。

于 2012-12-29T14:58:33.040 回答