2

我想在单击按钮后永久更改按钮的背景颜色。使用以下代码，颜色仅在按钮处于活动状态/被单击时更改。释放鼠标按钮后，添加的“单击”类不再应用于元素。

将以下代码应用于 INPUT 标记而不是 BUTTON 标记可以按照我需要的方式工作。但是，我使用的是 BUTTON 标记，因为我希望该值与按钮内的文本不同。

我需要改变什么？

- 谢谢。 

 HTML
 <button class="inactive" value="test">Button</button>

 CSS
 .inactive {background-color:gray;}
 .clicked {background-color:orange;}

 JS
 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 );
4

3 回答 3

7

唯一的问题是你缺少一个花括号：http: //jsfiddle.net/AaKuf/

 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 }); //<==here
于 2013-06-13T16:20:24.407 回答
1 
$('button.inactive').click(function() {
    $(this).removeClass('inactive').addClass('clicked');
});

应该做的伎俩。这将清除按钮上的旧类并为其提供正确的.clicked类。如果使用此解决方案后颜色正在重置，则问题出在代码的其他地方。

于 2013-06-13T16:19:24.813 回答
0 
$('button').mouseup(function() { 
    $(this).removeClass('clicked').addClass('inactive');
}
于 2013-06-13T16:22:34.460 回答