何时更改颜色单击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

不要使用id，而应该使用class:

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

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