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

我有三个按钮，想要更改所选按钮的颜色。 正如您将看到的，我可以在选择时更改颜色，但是当选择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单个按钮

现场演示

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

 
Button 1
 
Button 2
 
Button 3 

试试@ codebins