toggleClass несколько классов одним щелчком мыши

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 class удалит класс, если он существует, и добавит его, если его нет, это означает, что оператор $(this).find("div").toggleClass("a b").toggleClass("c d") всегда будет добавлять три класса, которых нет у элемента.

Toисправить это, вы можете получить все дочерние элементы, которые имеют класс 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>