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

Question

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

请看这个 fiddle :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/