如何使用jQuery切换div元素的背景颜色？

Question

我试图切换div元素的背景颜色，但是我的代码不起作用。 我写了以下代码：

$(document).ready(function(){
  var $on_off = true;
  $('div.hot').on('click', function($on_off){
    if($on_off){
      $(this).css('background-color', 'red');
    }
    else{
      $(this).css('background-color', 'yellow');
    }
    $on_off = !$on_off;
    });
});

我不明白为什么这行不通。 谢谢！

Answer 1

从处理程序on删除参数，因为第一个参数是始终被评估为true event-object （ Boolean({})===true ）

$(document).ready(function() {
  var $on_off = true;
  $('div.hot').on('click', function() {
    if ($on_off) {
      $(this).css('background-color', 'red');
    } else {
      $(this).css('background-color', 'yellow');
    }
    $on_off = !$on_off;
  });
});

简化代码：

$(document).ready(function() {
  var $on_off = true;
  $('div.hot').on('click', function() {
    $(this).css('background-color', $on_off ? 'red' : 'yellow');
    $on_off = !$on_off;
  });
});

Answer 2

事件处理程序在被调用时会收到一个事件对象，但是您期望另一个变量（ $on_off ）在事件处理程序中不存在。 因此，传递给事件处理程序的$on_off变量实际上是一个对象，该对象将在调用它们时自动创建并传递给事件处理程序。 该对象通常称为event或e 。 该对象包含有关实际发生的事件的必要信息。 要使用$on_off变量，您无需将其显式传递给事件处理程序。

 $(document).ready(function(){ var $on_off = true; $('div.hot').on('click', function(event){ event.preventDefault(); if($on_off){ $(this).css('background-color', 'red'); } else{ $(this).css('background-color', 'yellow'); } $on_off = !$on_off; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="hot">Click Me</div> 

Answer 3

我认为，如果您添加red和yellow两个类，这将更好地服务

$(document).ready(function() {
  $('div.hot').on('click', function() {
    if($(this).hasClass('red')
        $(this).switchClass('red','yellow');
    else
        $(this).switchClass('yellow','red');
  });
});

然后用初始化div