Question

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

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

这是剧本：

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

理想情况下，当页面最初加载时，会有一个默认按钮（buttonA）具有所选颜色。

非常感谢帮助。谢谢。

Answer 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/

Answer 2

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

Answer 3

您可以使用TOGGLECLASS单个按钮

LIVE DEMO

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

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

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

Answer 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

点击按钮切换颜色（并恢复其他按钮的颜色）

5 个答案: