高亮显示div onclick并取消第二次单击时的高亮显示

Question

var a = document.getElementById('a');
var b = document.getElementById('b');
b.style.cursor = 'pointer';
a.style.cursor = 'pointer';
a.onclick = function() {
  $("#a").css("background-color", "red");
};
b.onclick = function() {
  $("#b").css("background-color", "yellow");
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

我想在div中添加背景色css,然后再点击相同的潜水,它应该删除BG颜色.

在这里,我将代码编写为静态获取id.我将来可能会得到很多div,所以我需要动态获取div id.喜欢$ this.id bla bla ...请帮助我.感谢你..

Answer 1

您可以使用toggleClass在高亮和非高亮之间切换

$('div').click(function(){
  $(this).toggleClass('red');
});

 $('div').click(function(){
      $(this).toggleClass('red');
    });

.red {
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" id="a">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="b" id="b">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>

或使用数据属性来存储您的颜色:

$('div').click(function(){
      $(this).css('background',$(this).attr('data-color'));
  $(this).toggleClass('default');
    });

.default {
  background:#fff!important;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default" id="a" data-color="red">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="yellow">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>
<br>
<div class="default" id="b" data-color="blue">
  Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh Logesh
</div>