jquery - 点击jQuery时改变颜色

Question

我想做类似的事情我有这个代码

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

运行良好，但我想在单击另一个 div 时删除其中一个 div 的背景。我怎样才能做到这一点？

Answer 1

您可以设置transparent背景以提供移除背景的效果，也可以将背景设置为none. 就您而言，听起来您想选择该background: none选项-见下文。

没有任何：

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

透明的：

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

Answer 2

您应该使用类而不是使用 ID：

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