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而不是你想要效果的div。以下是您要找的内容吗？

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

我认为这更符合您的要求。这些课程是.a和.b instead of。urlWrapper and。fileWrapper`。此外，您需要使用逗号来选择多个类。

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Jquery ToggleClass不在两个类之间切换

2 个答案: