jQuery使用一个函数单独切换div系列

Question

我拥有的：

我有一个FAQ列表，由链接（问题）组成，用于切换相应段落（答案）的隐藏/显示。每个链接/段落（问题/答案）使用单独的功能

我需要什么：

我想使用一个函数来实现这一点，而不是为每个链接/段落（问题/答案）编写函数。

我当前的代码：

HTML：

<!--Q1-->

<p class="faq-question-container">
    <a href="#" id="q1">Some question</a>
</p>

<p class="faq-answer" id="a1">Some answer</p>

<!--Q2-->

<p class="faq-question-container">
    <a href="#" id="q2">Some question</a>
</p>

<p class="faq-answer" id="a2">Some answer</p>

<!--etc.-->

的jQuery

$('.faq-answer').hide();

//Q1

$("#q1").click(function(event) {
  event.preventDefault();
  $('#a1').slideToggle();
});

//Q2

$("#q2").click(function(event) {
  event.preventDefault();
  $('#a2').slideToggle();
});

//etc.

我的问题：

如何将上述jQuery代码简化为一个函数？

我尝试了什么：

jQuery("#faq-question-container a").click(function(event) {
  event.preventDefault();
  jQuery(this).next('#faq-answer').slideToggle();
});

什么都不做。

Answer 1

从您的代码开始，要带来的主要变化是

• 修复类选择器
• 在寻找下一个元素之前上去

这给出了这段代码：

jQuery(".faq-question-container a").click(function(event) {
  event.preventDefault();
  jQuery(this).closest('.faq-question-container').next('.faq-answer').slideToggle();
});

另一种不假设特定HTML组合的解决方案：

$(".faq-question-container a[id^=q]").click(function(event) {
  event.preventDefault();
  $('#a'+this.id.slice(1)).slideToggle();
});

工作原理：

• [id^=q]是ID为q的所有元素的选择器。
• this.id.slice(1)从95
获取q95