一鍵切換多個類

Question

我正在制作一個常見問題解答，其中答案會在單擊時切換，但它還會切換 div 的 class 以更改顏色。 它適用於第一個 div，但我想用相同的代碼觸發另一個 class，我幾乎通過添加另一個 toggleClass 來讓它工作，但是 c 也 toggles.b 而不是 to.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("ab").toggleClass("cd") });

 .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>

是否有人有解決方案，其中 class.a 會切換到.b，如果 div 有 class.c 會切換到.d？

Answer 1

Toggle class 將刪除 class 如果它存在並添加它，如果它不存在，這意味着$(this).find("div").toggleClass("ab").toggleClass("cd")語句將始終添加元素沒有的三個類。

要解決此問題，您可以獲得具有 class a或b的所有子元素並切換ab類並對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("ab"); $(this).find('div.c, div.d').toggleClass("cd"); });

 .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>