Question

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

将以下代码应用于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');
      });
 );

Answer 1

唯一的问题是你错过了大括号：http://jsfiddle.net/AaKuf/

 $(document).ready(function(){
      $('button').click(function(){
           $(this).addClass('clicked');
      });
 }); //<==here

Answer 2

$('button.inactive').click(function() {
    $(this).removeClass('inactive').addClass('clicked');
});

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

Answer 3

$('button').mouseup(function() { 
    $(this).removeClass('clicked').addClass('inactive');
}

JQUERY - 单击后将CSS类添加到BUTTON元素

3 个答案: