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

＆＃13;

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

＆＃13;

.red {
  background:red;
  }

＆＃13;

<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>

＆＃13;

或使用数据属性存储颜色：

＆＃13;

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

＆＃13;

.default {
  background:#fff!important;
  }

＆＃13;

<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>

＆＃13;

Answer 2

尝试使用toggleClass()而b是两次，所以请使用课程并使用.each()。它会应用每个b类。

＆＃13;

$(document).ready(function(){
$('#a').click(function(){
$(this).toggleClass("red");
})

$('.b').each(function(){
  $(this).click(function(){
$(this).toggleClass("yellow");
})
  })
})

＆＃13;

div{
  
  cursor:pointer;
}
.red{
  background-color:red;
 }
.yellow{
  background-color:yellow;
 }

＆＃13;

<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>

＆＃13;

Answer 3

在.red类

上添加了toggleClass

a.onclick = function() {
    $("#a").toggleClass("red");
};

风格

<style>
.red {
  background-color:red;
}
</style>

https://jsfiddle.net/bq1hewvs/1/

Answer 4

如果你想使用纯javascript，你不需要库只添加它并添加css def connect(%{"token" => token}, socket) do case Phoenix.Token.verify(socket, "user socket", token, max_age: @max_age) do {:ok, user_id} -> IO.inspect(user_id) {:ok, assign(socket, :user_id, user_id)} {:error, _reason} -> :error # this errors out because token is nil end end

.blue { background:#06C;}

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

4 个答案: