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) 从 id q95 获取 95