切换按钮的颜色（并恢复其他按钮的颜色） [英] Switch color of button on click (and revert color of other buttons)

问题描述

我有三个按钮，并希望在选择时更改按钮的颜色。正如你将看到的，我能够改变选择的颜色，但是当buttonB被选择时，我需要buttonA返回到它的原始颜色（在这一点buttonB应该选择的颜色）等等。目前，所选的每个按钮都采用所选颜色，但按钮不会返回其原始颜色。

I have three buttons, and want to change the color of the button on being selected. 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. Currently each button selected takes on the selected color, but buttons do not return to their original color.

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

这是脚本：

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

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

Ideally there will be a default button (buttonA) which has the selected color when the page loads initially.

帮助将非常感谢。谢谢。

Help would be greatly appreciated. Thank you.

推荐答案

您可以在onclick函数中删除所有按钮上的btn-success类，新选择的

You could remove the btn-success class on all buttons in the onclick function, then add the class only to the newly selected

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成功类新点击的按钮

Or you could have an array with the currently selected buttons, and removing the btn-success class on a newly clicked button

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

这篇关于切换按钮的颜色（并恢复其他按钮的颜色）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！