单击时切换按钮的颜色（并恢复其他按钮的颜色）答案

【问题标题】：Switch color of button on click (and revert color of other buttons)单击时切换按钮的颜色（并恢复其他按钮的颜色）
【发布时间】：2013-08-08 14:45:19
【问题描述】：

我有三个按钮，并且想在被选中时更改按钮的颜色。正如您将看到的，我可以在选择时更改颜色，但我需要 buttonA 在选择 buttonB 时返回其原始颜色（此时 buttonB 应该采用所选颜色）等等。目前，每个被选中的按钮都具有选定的颜色，但按钮不会恢复到原来的颜色。

请看这个小提琴：http://jsfiddle.net/Fwqv8/

这是脚本：

jQuery(document).ready(function(){
   jQuery('button.account').click(function() {
      jQuery(this).removeClass("account");
      jQuery(this).addClass("btn-success");
   });
});

理想情况下，页面初始加载时会有一个默认按钮 (buttonA)，该按钮具有选定的颜色。

我们将不胜感激。谢谢。

【问题讨论】：

你不需要 jQuery(document).ready( 因为代码是在点击时执行的

标签： javascript jquery click

【解决方案1】：

您可以在 onclick 函数中删除所有按钮上的 btn-success 类，然后仅将该类添加到新选择的按钮中

jQuery(document).ready(function(){
   jQuery('button.account').click(function() {
      jQuery('button.btn-success').removeClass('btn-success');
      jQuery(this).removeClass("account");
      jQuery(this).addClass("btn-success");
   });
});

或者您可以拥有一个包含当前选定按钮的数组，并删除新单击按钮上的 btn-success 类

http://jsfiddle.net/Fwqv8/3/

【讨论】：

【解决方案2】：

jQuery(function(){
    var $acctButtons = jQuery(".account");
    jQuery('button.account').click(function() {
        $acctButtons.removeClass("btn-success");
        jQuery(this).addClass("btn-success");
    });
});

【讨论】：

【解决方案3】：

您可以将TOGGLECLASS 用于单个按钮

LIVE DEMO

【讨论】：

【解决方案4】：

你可以使用：

jQuery(document).ready(function(){
        jQuery('button.account').click(function(){
            var that = this;
            jQuery('button.account').each(function(i, btn){
                jQuery(this).addClass("btn-danger");
                jQuery(this).removeClass("btn-success");
            });
            jQuery(that).addClass("btn-success");
        });
     });

此代码会让您的所有按钮在单击时切换回默认状态。只有单击的按钮会保持（在您的情况下）“绿色”。

通过在您的标记中设置默认类可以轻松完成默认按钮。

【讨论】：

为什么要将account 类添加到已经具有该类的按钮中？而且您不需要jQuery(document).ready(，因为代码是在单击时执行的
@PLAudet 哦，我明白了。不需要添加帐户。阅读这个问题，这个课程被删除了，所以我首先想到的是我添加了这个课程。就像我之前所说的那样，我使用了.ready，因为在问题中还有.ready 函数。
何没有在问题中看到 Ready :P
非常感谢大家的帮助：)
擦掉它。它确实有效。我也把文件准备好了，谢谢。

【解决方案5】：

JS

jQuery(document).ready(function() {

    $('.btn').click(function() {
        $('.btn').removeClass("btnSelected");
        $(this).addClass("btnSelected");
    })

});

CSS

.btn{
  width:100px;
  height:20px;
  display:inline-block;
  background-color:red;
}
.btnSelected{
  background-color:green;
}

HTML

<div id="btn1" class="btn">Button 1</div>
<div id="btn2" class="btn">Button 2</div>
<div id="btn3" class="btn">Button 3</div>

Try @ codebins

【讨论】：