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

此方法将一个或多个类名作为其参数。在里面第一个版本，如果匹配的元素集中的元素已经存在有类，然后删除;如果一个元素没有类，然后添加。

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

1 个答案: