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

Switch color of button on click (and revert color of other buttons)

本文关键字：颜色 按钮 恢复 其他 单击      更新时间：2023-09-26

我有三个按钮，希望在被选中时更改按钮的颜色。正如你所看到的，我可以在选择时更改颜色，但当选择按钮B时，我需要按钮A返回到其原始颜色（此时按钮B应该呈现所选颜色），依此类推。目前，每个选择的按钮都呈现所选的颜色，但按钮不会返回到其初始颜色。

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

这是脚本：

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

理想情况下，会有一个默认按钮（按钮a），它在页面初始加载时具有选定的颜色。

我们将不胜感激。非常感谢。

您可以删除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成功类

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

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

您可以将TOGGLECLASS用于单按钮

现场演示

您可以使用：

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");
        });
     });

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

通过在标记中设置默认类，可以很容易地完成默认按钮。

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>

尝试@codebins

相关文章：