jquery - 在 div 中交换背景 - jQuery

Question

我有如下的html结构

<div id="cool" class="cool"></div>
<div id="cool2" class="cool2"></div>
<button id="button">Click Me</button>

单击按钮时，我将如何交换 颜色。 div 不是任何子项。

$(document).ready(function(){ 
  $("#button").on('click', function(){
       $("#cool").addClass("cool2").removeClass("cool"); 
       $("#cool2").addClass("cool").removeClass("cool2");           
  });  
});

我知道有一些东西 toggleClass()，但是你如何交换两个不是 child 的 div 容器的背景，或者我应该将 even 附加到 document 和传播到按钮以获得 child ？。

Answer 1

就像您发布的那样，您可以使用 toggleClass()

This method takes one or more class names as its parameter. In the first version, if an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.

$(document).ready(function(){ 
  $("#button").on('click', function(){
       $("#cool, #cool2").toggleClass("cool cool2");          
  });  
});

div
{
    height: 50px;
}

.cool
{
    background-color: gray; 
}
.cool2
{
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="cool" class="cool"></div>
<div id="cool2" class="cool2"></div>
<button id="button">Click Me</button>