jQuery：通过单击问题在 php 中生成的问答列表中切换答案的可见性

Question

我有一个由 php 生成的问答列表。常见问题解答中的问题和答案的数量是可变的。使用 javascript，我想切换答案的可见性，因此当用户单击问题时，它将显示出来。使用 php，我可以对问题和答案进行计数，并使用计数整数为问题分配 id 或链接，或为答案分配类/id 或锚点。但是我不确定如何在单独的 javascript 中生成相同的计数....我不太懂 javascript :(

echo'<dl id="faq-list">';
$i = 1;
foreach(get_field('faq_qa') as $faq) :
    $count = $i++;
    echo'<dt class="question"><a href="#answer-'.$count.'">'.$faq['faq_question'].'</a></dt><dd class="answer answer-'.$count.'">'.$faq['faq_answer'].'</dd>';
endforeach;
echo'</dl>';

Answer 1

假设您的 HTML 结构不会改变，您可以将 click 事件处理程序绑定到 dt 元素并简单地显示以下同级（dd）：

$(document).ready(function() {
    $("#faq-list").on("click", "dt.question", function() {
        $(this).next().show();
    });
});

上面需要jQuery 1.7+，因为它使用on 方法。如果您使用的是旧版本，请查看delegate，或者直接使用click。

我选择了父 #faq-list 元素并将事件处理程序绑定在那里，因为它比将许多事件处理程序绑定到所有单独的 dt 元素更有效。这样，就有一个事件处理程序检查事件是否源自匹配的dt.question 元素。这是可能的，因为事件会从它们起源的 DOM 中冒泡（事件源自 dt，然后冒泡到父级，即 #faq-list）。

Answer 2

你可以使用一些 jQuery

$('#question-1').click(function() {
  $('.answer-1').show('slow');
});

但是，您还需要使用这样的唯一 ID 来识别您的问题

<dt class="question question-'.$count.'">

Answer 3

假设你所有的 dd 元素在页面加载时都被 CSS 隐藏了，试试这个：

$(function() {
    $('dt.question').on('click', function() {
        $(this).next().toggle();
    });
});