Twitter bootstrap 激活时切换Twitter引导按钮类

在twitter引导程序中，我正在寻找一种方法，允许按钮在不活动时成为默认颜色。一旦一个按钮被激活，我想改变它的颜色。我研究了如何使用提供的js文件来实现这一点。最后，我编写了一个小脚本来处理这个问题。

通过将

类切换

作为按钮的属性添加到按钮，等于按下按钮后要转到的内容，并添加以下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>

单切换

如果你想用一个按钮组也这样做，它的工作原理是一样的。只需将

类切换添加到组中的每个按钮即可


更新

我修改并创建了一个要点，以便在开始上课时有更好的反应

更新

我已经做了一个更改，以修复当您单击活动单选按钮时出现的错误

我已经编辑了你的代码。如果你点击代码中的一个活动状态，一切都会一团糟。我添加了一个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;

$（'.btn group>.btn.btn[data toggle=“button”]”）。单击（函数（）{
var按钮分类=['btn-primary'、'btn-danger'、'btn-warning'、'btn-success'、'btn-info'、'btn-Reverse']；
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（按钮类）；
if（btntogolleclass！='false'&&btntogolleclass！='btn'）{
if（btnGroup.attr（'data-toggle'）=='buttons-radio'）{
var activeButton=btnGroup.find（'.btn.active'）；
var activeBtnClass=activeButton.hasAnyClass（ButtonClass）；
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复选框'| |$this.attr（'data-toggle'）=='button'））{
$this.removeClass（btnCurrentClass）.addClass（btnToggleClass）.attr（'class-toggle'，btnCurrentClass））；
}
}
}
});    
$.fn.hasAnyClass=函数（classesToCheck）{
对于（var i=0；i

真诚的另一个Bootstrap爱好者
我不认为任何JS都是必要的。
我相信这完全可以通过CSS和属性来实现

是的，它涉及到一点CSS复制，但仍然比有时油嘴滑舌的javascript要好

将数据属性
数据活动类
添加到按钮
为所有类添加自定义CSS（例如一个用于可读性的类；颜色取自已存在的类“primary”、“success”，等等）


非活动按钮将照常呈现，基于
数据的活动-*
属性将通过此^CSS呈现


编辑：
当使用SASS或更少时，颜色可以/应该从Bootstrap已经定义的变量中使用…这解决了复制问题。
谢谢你的要点！但是，在单选按钮的情况下，当你在同一个按钮上单击两次时，会出现一个小故障。@BabyAzerty我已经更新了它以修复此问题。请参阅上次更新或您好，谢谢您的帖子。但是，如果将第二次单击事件指定给按钮（稍后在脚本中），则不起作用.有没有合适的方法来处理这个问题？还是每次我想在按钮组/按钮中切换类时都必须调用该函数？我不确定我是否理解你的意思@mffap@mffap查看并单击yes按钮。您将看到我在该按钮上有一个单击处理程序来添加消息。我认为这是wh看你的saying@bretterer请考虑一下这个答案是否满足你的需要：“我错过了什么吗？不能让它在小提琴上工作。”Khrys在几台电脑（甚至在我的手机上）尝试过。，没有问题，您能提供更多的错误信息吗？只有一些html和css，没有javascript，可能外部资源有问题（缺少bootstrap.min.js和bootstrap.min.css）？嗯，很奇怪…我在JSFIDLE本身中尝试过，我确信它不起作用。但现在它起作用了。谢谢你的反馈。我投了赞成票！这将防止在处理异步行为时出现错误。。。
.btn.active[data-active-class="primary"] {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}