切换时更改按钮背景颜色

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

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

  Hello 

Answer 1

你需要做的只是添加一些切换布尔值，在这个例子中它是名为’white’的var。

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

  Hello 

Answer 2

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

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

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

  Hello 

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

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

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

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

 .new { background-color: red } button { background-color: white } 

  Hello