jQuery - hasClass的按鈕與延遲

我使用引導複選框按鈕有一個按鈕組。當用戶點擊其中一個按鈕時，它將變爲活動狀態。jQuery - hasClass的按鈕與延遲

我使用下面的函數來檢查哪個按鈕處於活動狀態，哪個不是，然後在該函數的其餘部分使用該數據。

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

來源

2012-12-29 Nick Ginanto

這是因爲之前已引導設置類JavaScript是執行。 – adeneo

那麼我如何測試用戶是否點擊了按鈕？ –

你已經在測試它，但是設置這些類後，你會檢查它。你真的需要做的就是推遲它，就像 - > [** FIDDLE **]（http://jsfiddle.net/adeneo/AvXUb/4/），它應該工作？ – adeneo

Twitter的引導自動綁定工作在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.

來源

2012-12-29 14:58:33 Alexander

jQuery - hasClass的按鈕與延遲

回答

相關問題