jQuery Contrôle de DIVs uniques avec la même classe (siblings?)

Question

Je construis un module de FAQ pour mon site et je souhaite pouvoir contrôler des éléments uniques sur la page, même s'ils ont tous la même classe. Je crois que cela fait partie des frères et sœurs que je ne connais pas encore.

En gros, je veux que l’utilisateur puisse cliquer sur la question div, puis quand il clique dessus, la réponse div dans la même div que la question div est affichée (si cela a un sens!). Toute aide serait grandement appréciée.

<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>

Answer 1

Si je comprends bien votre question, vous devriez Commencez par définir toutes les réponses comme cachées dans le css: .answer {display: none;}

Vous pouvez ensuite utiliser jquery pour afficher la réponse correcte aux questions sur lesquelles vous avez cliqué:

$(document).ready ( function () {
    $('.question').click(function() {
        $(this).next('.answer').show();
    });
});

Modifier: vous pouvez également utiliser .toggle () au lieu de .show () pour afficher / masquer.

Answer 2

Vous devriez probablement consulter cette question où quelque chose de similaire est fait.

En gros, vous devez d'abord configurer les identifiants de vos éléments afin de pouvoir identifier des éléments individuels dans les classes définies.

Vous pouvez ensuite ajouter un gestionnaire d'événements click qui définirait l'élément sélectionné et afficherait la réponse appropriée.

Vous pouvez voir la syntaxe de saisie des frères et soeurs dans la documentation ici .