javascript - 'toggleClass` - 如何在 2 个不同的 `toggle` 名称之间进行 `class`

Question

我想切换 2 个不同的类。 (A b)，但我没有得到结果。我的代码有什么问题？

$('button').on('click', function () {
    $('div').toggleClass("A B");
});

div{
    height:20px;
}
.A{
    border:1px solid red;
}

.B{
    border:1px solid blue;
}

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

Answer 1

为您的 div 提供一个“入门”类。否则，第一个将“同时打开”，下一个将“同时关闭”等。

---

由于两者都设置了边框，最后应用的类被使用，而另一个被忽略，因此您不会看到“红色”边框。

可以把它想象成在一个 类之间切换 - 打开或关闭。如果您从无类开始，那么按钮将添加类(可以理解)。

如果您要切换两个 类，则适用相同的规则。您从 both off 开始，然后按钮将切换 both on - 由于 css 应用的顺序/css 的特殊性，第二个将覆盖第一个 css 定义。

因此，为了“切换”，您需要先将一个置于“开启”位置，将一个置于“关闭”位置。你去吧!按下按钮后，一个将从打开切换到关闭，另一个则相反。

$('button').on('click', function() {
  $('div').toggleClass("A B");
});

div {
  height: 20px;
}
.A {
  border: 1px solid red;
}
.B {
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="A"></div>
<button>Color Change</button>