活动时切换 Twitter Bootstrap 按钮类答案

【问题标题】：Toggle Twitter Bootstrap button class when active活动时切换 Twitter Bootstrap 按钮类
【发布时间】：2012-07-01 07:13:27
【问题描述】：

在 twitter bootstrap 中，我一直在寻找一种方法，让按钮在不活动时成为默认颜色。一旦按钮处于活动状态，我想更改它的颜色。我查看了使用提供的 js 文件的方法。我最终编写了一个小脚本来处理这个问题。

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

通过将class-toggle 添加为按钮的属性，等于按下按钮后您想要转到的内容并添加以下jQuery，您将获得上述结果。

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {

        if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){
            var btnGroup = $(this).parent('.btn-group');

            if(btnGroup.attr('data-toggle') == 'buttons-radio') {
                btnGroup.find('.btn').each(function() {
                    $(this).removeClass($(this).attr('class-toggle'));
                });
                $(this).addClass($(this).attr('class-toggle'));
            }

            if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') {
                if($(this).hasClass('active')) {
                    $(this).removeClass($(this).attr('class-toggle'));
                } else {
                    $(this).addClass($(this).attr('class-toggle'));
                }
             }

          }


      });

然后按钮看起来像

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button>

如果您也想使用按钮组来执行此操作，则其工作方式相同。只需将class-toggle 添加到组中的每个按钮即可。

The jsfiddle

更新

我已经修改并创建了一个要点，以便在使用类启动按钮时获得更好的响应。 Toggle Twitter Bootstrap Classes

更新

我已进行更改以修复单击活动单选按钮时出现的错误

Find it here

【讨论】：

感谢您的要点！但是，在单选按钮的情况下，当您在同一个按钮上单击两次时，会出现故障。
@BabyAzerty 我已经更新它来解决这个问题。查看上次更新或jsfiddle.net/W9hUr/120
您好，感谢您的这篇文章。但是，将第二次单击事件分配给按钮不起作用（稍后在脚本中）。是否有适当的方法来处理这种情况，或者每次我想在按钮组/按钮中切换类时都必须调用该函数？
我不确定我明白你在说什么@mffap
@mffap 查看jsfiddle.net/W9hUr/151 并单击“是”按钮。你会看到我在那个按钮上有一个点击处理程序来添加一条消息。我想这就是你所说的

【解决方案2】：

我不认为，任何 JS 都是真正必要的。我相信这可以完全通过 CSS 和 data 属性来完成。

是的，它涉及到一点 CSS 复制，但仍然比有时出现故障的 javascript 更好。

为按钮添加数据属性data-active-class，
为所有类添加自定义 CSS（一个示例以提高可读性；颜色取自现有的“primary”、“success”等类）
```
.btn.active[data-active-class="primary"] {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
```

非活动按钮将照常呈现，活动基于data-*属性将由此^^ CSS呈现。

JSFiddle with complete CSS

编辑： 当使用 SASS 或 LESS 时，可以/应该使用 Bootstrap 已经定义的变量中的颜色...这解决了重复问题。

【讨论】：

@bretterer 请考虑这个答案是否满足您的需求:)
我错过了什么吗？无法在提供的小提琴中使用它。
@Khrys 在几台 PC 上尝试过（甚至在我的手机上），没有问题，您能否提供更多信息以说明问题所在？只有一些html和css，没有javascript，可能是外部资源有问题（缺少bootstrap.min.js和bootstrap.min.css）？
嗯，很奇怪...我在 JSFiddle 中尝试过，我确信它不起作用。但现在是。感谢您的反馈。
我要投票了！这将防止在处理异步行为时出现错误...

【解决方案3】：

我已经编辑了您的代码。如果您单击代码中的活动状态，一切都会搞砸。我添加了一些 if 语句来防止这种情况。如果你需要修复，只是一个贡献。很好地处理代码。

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse'];
var $this = $(this);

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) {

        var btnGroup = $this.parent('.btn-group');
        var btnToggleClass = $this.attr('class-toggle');
        var btnCurrentClass = $this.hasAnyClass(buttonClasses);

        if(btnToggleClass!='false'&&btnToggleClass!='btn') {

            if (btnGroup.attr('data-toggle') == 'buttons-radio') {
                var activeButton = btnGroup.find('.btn.active');
                var activeBtnClass = activeButton.hasAnyClass(buttonClasses);

                    activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);               
                    $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);

            }

            if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') {
                $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);
            }

        }


    }



});    

$.fn.hasAnyClass = function(classesToCheck) {
    for (var i = 0; i < classesToCheck.length; i++) {
        if (this.hasClass(classesToCheck[i])) {
            return classesToCheck[i];
        }
    }
    return false;

真诚的另一个引导爱好者

【讨论】：