Как переключить цвет фона элемента div с помощью jQuery?

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 обработчика в качестве первого аргумента event-object который всегда оценивается как true (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

Обработчики событий получают объект Event при их вызове, но вы ожидаете другую переменную ($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 с