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

【问题标题】：Change button background color on toggle在切换时更改按钮背景颜色
【发布时间】：2017-08-19 20:41:02
【问题描述】：

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

 $(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>

【问题讨论】：

标签： jquery button onclick toggle

【解决方案1】：

$(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>

使用带有 css 的类
每次点击使用.toggleClass()切换班级

描述：根据类的存在或状态参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

【讨论】：

【解决方案2】：

您需要做的就是添加某种切换布尔值，在本例中是名为“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>

【讨论】：

虽然这可能有效，但远非理想。您应该使用类来切换样式，因为它尽可能地将 CSS 与 JS 代码分开。

【解决方案3】：

记录初始按钮颜色，然后根据状态标志设置/重置

$(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;
  })
});

【讨论】：

【解决方案4】：

试试这个，简单的 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; 
      }
   });
});

【讨论】：

【解决方案5】：

最简单的方法是使用 CSS 类设置 background-color，然后在 click 事件处理程序中调用 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>

【讨论】：