Jquery ToggleClass 不在两个类之间切换

Question

我有两个元素：

<div class="a"></div>
<div class="b"></div>

我还有一个复选框：

<input type="checkbox" id="checkbox" />

我试图做的是使用 jquery toggleClass 在两个类之间切换，如下所示：

$('#checkbox').click(function () {
        $(".urlWrapper .fileWrapper").toggleClass("urlWrapper fileWrapper");
    });

但它并没有在两者之间切换。我做错了什么？

Answer 1

你想实现什么，看起来你有两个div 的类名与你想实现的要不同的类名。以下是您要查找的内容吗？

$('#checkbox').on("click",function () {
        $(".a").toggleClass("urlWrapper fileWrapper");
        $(".b").toggleClass("urlWrapper fileWrapper");  
    });

.urlWrapper {
  color : red;
 }
.fileWrapper {
  font-weight:bold;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="a urlWrapper">
      content 1
    </div>
    <div class="b fileWrapper">
      content 2
</div>
    <input type="checkbox" id="checkbox" />

Answer 2

我认为这更符合您的需求。这些类是.a的，.b instead of.urlWrapper and.fileWrapper'。此外，您需要有一个逗号来选择多个类。

$('#checkbox').click(function () {
  $(".urlWrapper, .fileWrapper").toggleClass("urlWrapper fileWrapper");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="urlWrapper">A</div>
<div class="fileWrapper">B</div>
<input type="checkbox" id="checkbox" />