JQuery, управляющий отдельными DIV с одним и тем же классом (братьями и сестрами?)
Я создаю модуль часто задаваемых вопросов для своего сайта и хочу иметь возможность управлять отдельными элементами на странице, даже если все они имеют один и тот же класс. Я считаю, что это относится к братьям и сестрам, с которыми я еще не знаком.
В основном я хочу, чтобы пользователь мог щелкнуть вопрос div, а затем, когда он щелкнет по нему, ответ div в том же div, что и div вопроса, установлен для отображения (если это имеет смысл!). Любая помощь будет принята с благодарностью.
<div class = "set">
<div class = "question">What is the airspeed velocity of an unladen swallow?</div>
<div class = "answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>
<div class = "set">
<div class = "question">What is the airspeed velocity of an unladen swallow?</div>
<div class = "answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>
<div class = "set">
<div class = "question">What is the airspeed velocity of an unladen swallow?</div>
<div class = "answer">Although a definitive answer would of course require further measurements, published species-wide averages of wing length and body mass, initial Strouhal estimates based on those averages and cross-species comparisons, the Lund wind tunnel study of birds flying at a range of speeds, and revised Strouhal numbers based on that study all lead me to estimate that the average cruising airspeed velocity of an unladen European Swallow is roughly 11 meters per second, or 24 miles an hour. </div>
</div>
Ответы 2
Если я правильно понял ваш вопрос, вам следует Начните с установки всех ответов как скрытых в CSS: .answer {display: none;}
Затем вы можете использовать jquery, чтобы показать правильный ответ на выбранные вопросы:
$(document).ready ( function () {
$('.question').click(function() {
$(this).next('.answer').show();
});
});
Обновлено: вы также можете использовать .toggle () вместо .show () для отображения / скрытия.
Вам, вероятно, следует проверить этот вопрос, где сделано что-то подобное.
По сути, вам сначала нужно настроить идентификаторы для ваших элементов, чтобы вы могли идентифицировать отдельные элементы в установленных классах.
Затем вы можете добавить обработчик события щелчка, который установит выбранный элемент и покажет соответствующий ответ.
Вы можете увидеть синтаксис для захвата братьев и сестер в документация здесь.