在 div - jQuery 中交换背景

Question

我的结构如下html

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

点击按钮，我会如何swap color。 div 不是任何人的孩子。

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

我知道有东西 toggleClass()，但是你如何交换两个非儿童 div 容器的背景，或者我应该将偶数附加到 document 和 propagate 按钮得到孩子们？

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>

在 div - jQuery 中交换背景

Swaping background in div - jQuery

css

jquery