1

ブートストラップとjQueryを使用して、一連のトグルボタンと、それらのボタンを押した後の影響を制御しています。HTMLボタンの切り替えは、data-toggle="button"によって制御されます。

<div class="btn-group" data-toggle="buttons-radio" style="margin-left:5px">
    <button id="fullWidth" class="btn btn-toggle" data-toggle="button">full</button>
    <button id="halfWidth" class="btn btn-toggle" data-toggle="button">half</button>
</div>
<button id="flight" class="btn btn-toggle" data-toggle="button">Flight</button>
<button id="derived" class="btn btn-toggle" data-toggle="button">Derived</button>

そして、私のjsセグメント（月のWebページ本体の下部にあります）は次のとおりです。

        $('.btn-toggle').click(function() {
        if (($('#derived').hasClass('active')) && ($("#flight").hasClass('active'))){
            DO SOME STUFF
        }
        else if ($("#derived").hasClass('active')){
            DO SOME STUFF               
            if ($("#halfWidth").hasClass('active')){
            DO SOME STUFF               
            }
            else {
            DO SOME STUFF               
            }
        }
        else if ($("#flight").hasClass('active')){
            DO SOME STUFF               
            if ($("#halfWidth").hasClass('active')){
            DO SOME STUFF
            }
            else {
            DO SOME STUFF
            }
        }
        else {
        DO SOME STUFF
        }
    });

私の問題は、JSがトグルが変更される前にトグルボタンの状態をチェックすることです。最初に変更するオプションを選択してから、jsを実行してからチェックを実行できるようにしたいと思います。

4

3 に答える 3

1

ブートストラップトグルボタンは、クリックするとCSSクラスを変更する通常のボタンです。残念ながら、'onclick'のコールバックは、クラスを変更するためにブートストラップが呼び出される前に実行されます。通常の「btn」を拡張する独自のブートストラップ「custom-toggle-btn」を作成し、onclick関数の最初の行として「active」クラスを手動で切り替えることができます。このようなもの：

$('.custom-btn-toggle').click(function() {

    $(this).toggleClass('active'); // Add this line – note the change in class-name above

    if (($('#derived').hasClass('active')) && ($("#flight").hasClass('active'))){
        DO SOME STUFF
    }
    ...
于 2013-02-25T23:19:31.027 に答える
0

activeカスタムボタンを定義する代わりに、カスタムクラスを使用できます。jQueryのclick関数とtoggleClass関数の両方を使用する必要があります。まず、別のクラス（たとえば、checked）をに追加してから、clickコールバックに次のように入力します。

callback = function() {
  $(.btn-toggle).toggleClass('checked');
  $(.btn-toggle).hasClass('checked');
  // do your checks and other stuff
}

$(.btn-toggle).click(callback);
于 2014-10-27T18:42:59.710 に答える
-1

.click（）関数の代わりにjQueryの.toggle（）関数を使用してみることができます。

jQuery APIで検索して、必要なものを確認できます。

于 2013-01-18T18:15:51.180 に答える