3

次のようなチェックボックスボタングループがあります。

<div class="btn-group" id="id_group" data-toggle="buttons-checkbox">
  <button class="btn myclass" type="button" data-value="0">Value 0</button>
  <button class="btn myclass" type="button" data-value="1">Value 1</button>
</div>

JS イベント ハンドラー:

$(".myclass").click(function(event) {
  console.log($(".myclass.active").length);
  console.log($(this).hasClass("active"));
});

data-valueチェックされているすべてのボタンを取得したいのですが、クリックイベントではactiveクラスがまだ設定されていません。つまり、最初にボタンをクリックすると、出力は次のようになります。

>>> 0
>>> false

次に同じボタンをクリックすると (つまり、チェックを外します)、出力は次のようになります。

>>> 1
>>> true

つまり、activeクラスはイベント後に設定されます。

クリックイベント中にボタンの実際の状態を取得するにはどうすればよいですか?

4

4 に答える 4

4

クリック イベントとアクティブ クラスのタイミングにも問題がありました。

davidkonrad の回答をさらに進め、この投稿を使用して、ブートストラップ ソースを変更する必要がないように次のことを思いつきましたが、完全なオーバーライドよりも少し軽量です。

var _old_toggle = $.fn.button.prototype.constructor.Constructor.prototype.toggle;

$.fn.button.prototype.constructor.Constructor.prototype.toggle = function () {
    _old_toggle.apply(this);

    if (this.$element.hasClass('active')) {
        this.$element.trigger('active')
    }
}
于 2012-12-11T11:29:54.080 に答える
1

activeクラスがボタンに追加されるたびにどうしてもイベントが必要な場合は、bootstrap.js を変更できます。activeクリックによってトリガーされる小さな関数で設定/設定解除さButton.prototype.toggleれます, 行 1362-1370:

Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')
  }

これをに変更

Button.prototype.toggle = function () {
    var $parent = this.$element.closest('[data-toggle="buttons-radio"]')

    $parent && $parent
      .find('.active')
      .removeClass('active')

    this.$element.toggleClass('active')

    if (this.$element.hasClass('active')) {
        this.$element.trigger('active')
    }
  }

これで、バインドできるイベントができました.myclass

$(".myclass").on('active', function() {
  console.log($(".myclass.active").length);
  console.log($(this).hasClass("active"));
});

または、上記があまりにも汚いと思われる場合は、ここで説明されているスケルトンに従って、Button.prototype を拡張/変更 (メソッド、オプションなどを追加) できますTwitter Bootstrap プラグインを拡張する方法

于 2012-11-06T00:56:31.697 に答える
0

あなたは正しく推論しました。クリックイベントはアクティブなクラスをまだ更新していないため、それらを検索しても返されません。クラス変更のためにトリガーされるイベントはありません。

ただし、実行できるのはsetTimout、たとえば100ミリ秒、クリックイベントがトリガーされるのに十分な時間を追加することです。イベントの伝播を可能にするために、遅延を調整する必要がある場合があることに注意してください。

于 2012-11-05T17:35:39.050 に答える
0

jQuery のdata管理機能を使用して状態を保存し、activeボタンのクリックで状態を切り替えました。あまり良くもありませんが、それは何かです。

于 2013-06-26T14:02:09.647 に答える