4

サイトで Twitter Bootstrap ボタン グループを使用しようとしdata-toggle="buttons-radio"ています。ブートストラップ マークアップは次のとおりです。

<div class="btn-group program-status" data-toggle="buttons-radio">
    <button class="btn">All</button>
    <button class="btn">Active</button>
    <button class="btn">Planning</button>
    <button class="btn">End of Life</button>
    <button class="btn">Cancelled</button>
</div>

押されたボタンに応じて、クエリで同じページにリダイレクトする必要があります。これを達成するために、次のjQueryコードを使用しようとしました。

<script>
    var sParamStr = '';

    function addToParamStr(str) {
        sParamStr += str;
    }

    function redirectToUpdatedLocation() { 

        $('.program-status > .btn.active').each(function () {
            addToParamStr( '?status=' + $(this).text());
        });

        console.log(sParamStr);
        window.location.href = "program" + sParamStr;
    }

    $document.ready(function () {
        $('.program-status > .btn').on('click', function (e) {
            redirectToUpdatedLocation();
        });
    });
</script>

ただし、ブラウザは常にクエリ文字列なしで {site}/program にリダイレクトします。行をコメントアウトwindow.location.href = "program" + sParamStr;することで、2回目以降のクリックsParamStrが適切に追加されることを確認できました。

私のコードは、以前に押されたボタンのテキストを読み込もうとしているようです.button('toggle').メソッドフォームbootstrap.jsは終了しました. 次のように関数を変更すると、コードは意図したとおりに機能しました。

$document.ready(function () {
    $( '.program-status > .btn').on('click', function (e) {
        $(this).addClass('active');
        redirectToUpdatedLocation();
    });
});

この方法は今のところうまくいきますが、これを達成するための適切な方法を知りたいです。つまり、前のクリック バインディングが終了した後にコードを実行するにはどうすればよいですか?

アップデート：

Twitter Bootstrap フォーラムでこのリンクを見つけました。既知の問題のようです。 https://github.com/twitter/bootstrap/issues/2380

4

2 に答える 2

1

Bootstrap が正確に何をしているのかはわかりませんが、クラス.toggleの設定で完了するある種のアニメーションを実行しているようです。active代わりにコードをエンキューしてみることができます:

$( '.program-status > .btn').on('click', function (e){
    $(this).queue(function (next) {
        redirectToUpdatedLocation();
        next();
    });
});

たとえば、切り替え中の div をクリックします: http://jsfiddle.net/9HwYy/

とにかくウィンドウの場所を変更しているので、クリックしたものだけでなくすべて を更新するのも少しばかげているようです。href

于 2013-02-26T00:40:18.570 に答える
0

試す

$('.program-status > .btn.active').each(function(i,v){
  v = $(v);
  addToParamStr( '?status=' + v.text());
});

「これ」があなたのケースで機能しているかどうかわからないので。

于 2013-02-26T00:36:16.777 に答える