如何在点击时使用jQuery更改按钮颜色

Question

我正在尝试使用jQuery单击时更改按钮颜色。

我希望按钮在单击时从蓝色变为灰色。

到目前为止，我有这段代码

请参阅fiddle

$(".vote-number").hide();
$(".vote-btn").click(function(){
    $(this).next('.vote-number').finish().show().fadeOut(5000);
});

Answer 1

我建议使用jQuery添加一个CSS类，它将CSS的样式方面保留在CSS中，而不是直接将它放在逻辑中。

的 jsfiddle

的 JS 的

$(".vote-btn").click(function() {
    $(this)
        .addClass('clicked')
        .next('.vote-number')
        .finish()
        .show()
        .fadeOut(5000);
});

的 CSS 的

.vote-btn {
    background: blue;
    color: white;
    padding: 30px;
    margin-bottom: 30px;
}

.vote-btn.clicked {
    background: grey;
}

Answer 2

您只需更改单击按钮的背景颜色，如下所示

 $(".vote-btn").click(function(){
          $(this).css({"background-color":"grey"});
 });

Answer 3

看到这个小提琴：

http://jsfiddle.net/Zword/dVPrq/7/

$(".vote-number").hide();

  $(".vote-btn").click(function(){
      $(this).css({'background':'grey'}).next('.vote-number').finish().show().fadeOut(5000);
  });

上述小提琴的较新版本，在淡出后恢复蓝色：http://jsfiddle.net/Zword/dVPrq/9/

Answer 4

 $(".vote-btn").click(function(){
          $(this).next('.vote-number').finish().show().fadeOut(5000);
          $(this).css('background','grey');
      });

转换点击的按钮。

DEMO