javascript - 一键切换多个类别

Question

我正在制作一个常见问题解答，其中答案会在单击时切换，但它也会切换 div 的类来更改颜色。它对于第一个 div 工作得很好，但我想用相同的代码触发另一个类，我几乎通过添加另一个toggleClass来让它工作，但 .c 也切换 .b 而不是 .d

$(".faq div.answer"), $(".faq div.faqbox").click(function(a) {
  a.preventDefault();
  var n = $(this).parent().find("div.answer");
  $(".faq div.answer").not(n), n.slideToggle(), $(this).find("div").toggleClass("a b").toggleClass("c d")
});

.answer {
  display:none;
}

.a { width:20px; height:20px; background:#000000; }
.c { width:20px; height:20px; background:#888888; }
.b { width:20px; height:20px; background:#ff0000; }
.d { width:20px; height:20px; background:#00ff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="faq">

  <div class="faqbox">
  <span>Question <div class="a"></div></span>
  </div>

  <div class="answer">
  Answer
  </div>
  
</div>

<div class="faq">

  <div class="faqbox">
  <span>Question <div class="c"></div></span>
  </div>

  <div class="answer">
  Answer
  </div>
  
</div>

是否有人有一个解决方案，其中类 .a 将切换到 .b，如果 div 具有类 .c，它将切换到 .d？

Answer 1

Toggle 类将删除一个类(如果存在)，如果不存在则添加它，这意味着 $(this).find("div").toggleClass("a b").toggleClass("c d") 语句将始终添加该元素没有的三个类。

要解决此问题，您可以获取具有类 a 或 b 的所有子元素，并切换 a b 类并执行相同的操作对于 c d 类，下面是一个示例:

$(".faq div.answer"), $(".faq div.faqbox").click(function(a) {
  a.preventDefault();
  var n = $(this).parent().find("div.answer");
  n.slideToggle(); 
  $(this).find("div.a, div.b").toggleClass("a b");
  $(this).find('div.c, div.d').toggleClass("c d");
});

.answer {
  display:none;
}

.a { width:20px; height:20px; background:#000000; }
.c { width:20px; height:20px; background:#888888; }
.b { width:20px; height:20px; background:#ff0000; }
.d { width:20px; height:20px; background:#00ff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="faq">

  <div class="faqbox">
  <span>Question <div class="a"></div></span>
  </div>

  <div class="answer">
  Answer
  </div>
  
</div>

<div class="faq">

  <div class="faqbox">
  <span>Question <div class="c"></div></span>
  </div>

  <div class="answer">
  Answer
  </div>
  
</div>