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

Question

我有的：

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

我需要的：

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

我当前的代码：

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一个 idq95