在切换时更改按钮背景颜色

Question

我有一个按钮，我想在点击时将它的背景颜色更改为白色，然后当我再次点击它时它 return 回到原来的背景颜色，我该怎么做？这是我的代码：

 $(document).ready(function () {
            $("button").click(function () {
    $(this).css("background-color", "#FFF");
                    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>

Answer 1

最简单的方法是使用 CSS class 设置 background-color，然后在点击事件处理程序中调用 toggleClass()，如下所示:

$("button").click(function() {
  $(this).toggleClass('foo');
});

button { 
  background-color: #000; 
  color: #FFF;
}
button.foo { 
  background-color: #FFF; 
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>

Answer 2

$(document).ready(function() {
  $("button").click(function() {
    $(this).toggleClass("new");
  });
});

.new {
  background-color: red
}

button {
  background-color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>

使用 class 和 css
每次点击使用.toggleClass()切换class

Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

Answer 3

试试这个，简单的 JS 解决方案；

$(document).ready(function () {

   var i=0;
   $("button").click(function () {

      if(i==0){
          $(this).css("background-color", "#FFF");
          i=1;
      }
      else{
          $(this).css("background-color", "#000"); 
          i=0; 
      }
   });
});

Answer 4

记录初始按钮颜色，然后set/reset根据状态标志

$(function(){
  var buttoncolor = $('button').css('background-color');
  var state=true;
  $('button').click(function(){
     if (state )
     {
        $('button').css('background-color','white');
     }
     else
     {
        $('button').css('background-color', buttoncolor );
     }
     state=!state;
  })
});

Answer 5

您需要做的就是添加某种切换布尔值，在本例中它是名为 'white'.

的变量

var white = false
var bgcolor;
$(document).ready(function () {
    $("button").click(function () {
        if (white = !white) {
            bgcolor = $(this).css('backgroundColor');
            $(this).css("background-color", "#FFF");
        } else {
            $(this).css("background-color", bgcolor);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Hello</button>

在切换时更改按钮背景颜色

Change button background color on toggle

jquery

onclick

button

toggle