迭代和選擇那些唯一的數字（jQuery）

Question

我試圖做的範圍：通過yaml文件構建各種數量的FAQ，這些文件只有默認顯示的問題，然後點擊適當的答案將會呈現。

我已經想出瞭如何爲每個問題和每個答案添加一個獨特的類，但我無法弄清楚當question1被點擊時如何切換answer1。

我感謝任何幫助！我仍然在學習javascript/jquery，很容易迷路，所以如果你能幫忙解釋或指出我錯過的文檔，我將不勝感激！

https://jsfiddle.net/texobyte/jns7v9ox/

$(".faqQuestion").each(function (i) { 
    $(this).addClass("question" + (i + 1)); 
}); 
$(".faqAnswer").each(function (i) { 
    $(this).addClass("answer" + (i + 1)); 
}); 


$("#toggle-faq h5").hide(); 
$("#toggle-faq").click(function() { 
    $("#toggle-faq h5").slideToggle("slow", function() {}); 
}); 

Answer 1

你也可以試試這個（改變ID「肘常見問題解答」一類後，因爲對方回答說）：

$(".toggle-faq h5").hide(); 

$(".toggle-faq").on('click', function() { 

    if ($(this).hasClass("active")) { 
     $(this).children("h5").slideToggle(); 
     $(this).removeClass("active"); 
     return; 
    } 

    $(".active").children("h5").slideToggle(); 
    $(".active").removeClass("active"); 

    $(this).addClass("active"); 
    $(this).children("h5").slideToggle(); 

}); 

的「這」指的是它只會切換.toggle -faq已被點擊，而不是全部。

Answer 2

我對你的工作撥弄並提出一些修改，以使其工作。這裏是LINK

我已經取代id="toggle-faq"與class="toggle-faq";我們不應該重複的ID：

<div class="toggle-faq"> 

還更換驗證碼：

$("#toggle-faq h5").hide(); 
$("#toggle-faq").click(function() { 
    $("#toggle-faq h5").slideToggle("slow", function() {}); 
}); 

有了更好的工作代碼：

// hide all answers at first 
$('.faqAnswer').hide(); 

$('.toggle-faq').on('click', function() { 
    var $this = $(this); 

    // if this is already open 
    if ($this.hasClass('active')) { 
     return; 
    }; 

    // close any other already open... 
    if (!!currentSelected) { 
     currentSelected.find('.faqAnswer').slideToggle('slow'); 
    }; 

    // ...and then open the clicked item 
    $this.find('.faqAnswer') 
     .slideToggle('slow', function() { 

      // now, make sure this is currentSelected 
      currentSelected = $this; 
     }); 
}); 

讓我知道如果您有任何疑問。祝你好運，玩得開心！