2

我有三个按钮，并且想在被选中时更改按钮的颜色。As you will see, I am able to change the color on selection, but I need buttonA to return to its original color when buttonB is selected (at which point buttonB should take on the selected color) and so on. 目前，每个选定的按钮都采用选定的颜色，但按钮不会恢复到其原始颜色。

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

这是脚本：

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

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

帮助将不胜感激。谢谢你。

4

5 回答 5

4

您可以删除 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/

于 2013-08-08T14:48:03.787 回答
0 
jQuery(function(){
    var $acctButtons = jQuery(".account");
    jQuery('button.account').click(function() {
        $acctButtons.removeClass("btn-success");
        jQuery(this).addClass("btn-success");
    });
});
于 2013-08-08T14:49:20.340 回答
0

您可以TOGGLECLASS用于单按钮

现场演示

于 2013-08-08T14:50:22.057 回答
0

您可以使用：

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

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

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

于 2013-08-08T14:56:09.303 回答
0

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

于 2013-08-08T15:07:33.440 回答