jQuery: переключение видимости ответов в списке вопросов и ответов, сгенерированном в php, путем нажатия на вопросы

Question

У меня есть список вопросов и ответов, сгенерированный php. Количество вопросов и ответов в faq будет переменным. С javascript я хотел бы переключить видимость ответа, поэтому, когда пользователь нажимает на вопрос, он будет отображаться. С помощью php я могу считать вопросы и ответы и использовать целое число, чтобы назначить идентификатор или ссылку на вопрос или класс / идентификатор или привязку к ответам. Однако я не уверен, как создать такой же счетчик в отдельном 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

Предполагая, что все ваши dd элементы скрыты CSS при загрузке страницы, попробуйте это:

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

Answer 3

Вы можете использовать jQuery

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

Однако вам нужно будет также идентифицировать свой вопрос с уникальным идентификатором, подобным этому

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