在 jQuery 中的 2 类之间切换

Question

如何在 jQuery 中的两个 class 元素之间切换，而该元素没有任何一个 class。

请注意：我想知道是否可以使用 toggleClass() 方法而不是 addClass()、removeClass() 方法来执行此操作。例如：

$('#myDiv').click(function(){
    $("#myDiv").toggleClass('red blue') 
})

Answer 1

只需将 toggleClass 与多个 class 一起使用即可。 jQuery 将逐个切换它们。

$("div").addClass("red");

setInterval(function() {
    $("div").toggleClass("red blue");
}, 1000);

div {
  width: 100px;
  height: 100px;
}
.red {
  background: red;
}
.blue {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>

Answer 2

您可以使用 toggleClass() 方法的函数参数：

$('#myDiv').click(function() {
  $(this).toggleClass(function(){
    return $(this).is('.red, .blue') ? 'red blue' : 'red';
  })
});

$('#myDiv').click(function() {
  $(this).toggleClass(function() {
    return $(this).is('.red, .blue') ? 'red blue' : 'red';
  })
});

.red {
  color: red;
}
.blue {
  color: blue;
}
#myDiv {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
  My DIV
</div>

在 jQuery 中的 2 类之间切换

Toggle between 2 classes in jQuery

jquery

toggleclass

在 jQuery 中的 2 类 之间切换

Toggle between 2 classes in jQuery

jquery

toggleclass

在 jQuery 中的 2 类之间切换