Question

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

 $(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类设置background-color，然后在click事件处理程序中调用toggleClass()，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要做的就是添加某种切换布尔值，在此示例中，它名为＆＃39; white＆＃39;。

＆＃13;

^James\s+(\w+).*\s+(\w+)$

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

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

Answer 5

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

设置/重置

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

切换时更改按钮背景颜色

5 个答案: