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 に答える