Изменение цвета Когда Нажмите Jquery

Question

Я хочу сделать что-то подобное у меня есть этот код

$(document).ready(function(){ 
    $('#au').click(function(){ 
    $('#light1').css('background', 'yellow'); 
    }); 
    $('#cu').click(function(){ 
    $('#light2').css('background', 'yellow'); 
    }); 
}); 

работает хорошо, но я хочу, чтобы удалить фон одного из DIV, когда я нажимаю на другой. Как я могу это сделать?

Answer 1

Вы можете установить фон transparent, чтобы получить эффект от удалённого фона, или вы можете установить фон на none. В вашем случае это звучит так, как будто вы хотите пойти с опцией background: none - см. Ниже.

Нет:

$('#cu').click(function(){ 
    $('#light2').css('background', 'none'); 
}); 

Прозрачный:

$('#cu').click(function(){ 
    $('#light2').css('background', 'transparent'); 
}); 

Answer 2

Вместо использования идентификаторов вы должны использовать классы:

$('.clickable').click(function(){ 
    $('.light').css('background', 'none'); 
    $('.light').eq($(this).data('light')).css('background', 'yellow'); 
}); 

Это будет работать с HTML, как:

<div class="light"></div> 
<div class="light"></div> 
<button id="au" class="clickable" data-light="0"/> 
<button id="cu" class="clickable" data-light="1"/> 

Answer 3

Как о чем-то вроде:

$(document).ready(function(){ 
    $('#au').click(function(){ 
    $('#light1').toggleClass('yellow'); 
}); 
    $('#cu').click(function(){ 
    $('#light2').toggleClass('yellow'); 
    }); 
});