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

你推断正确。click 事件尚未更新活动类，因此当您搜索它们时，它不会返回。没有为类更改触发的事件。

但是，您可以做的是添加一个setTimout100 毫秒的时间，足以让点击事件触发。请注意，您可能需要调整延迟以允许事件传播。

于 2012-11-05T17:35:39.050 回答
0

我使用 jQuery 的data管理来存储一个active状态，在按钮点击时切换它。也不是很好，但它的东西。

于 2013-06-26T14:02:09.647 回答