jQuery Controlling DIVs simples avec la même classe (frères et soeurs?)

Question

Je construis un module FAQ pour mon site et je veux être en mesure de contrôler des éléments simples sur la page, même si elles ont toutes la même classe. Je crois que cela relève de frères et sœurs que je ne connais pas encore.

Fondamentalement je veux que l'utilisateur puisse cliquer sur le div de question et puis quand ils le cliquent la réponse div dans le même div que le div de question est montré pour montrer (si cela a du 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 devez Commencez par définir toutes les réponses que caché dans le css: .answer {display: none;}

Ensuite, vous pouvez utiliser jquery pour montrer la bonne répondre aux questions cliqués:

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

Edit: vous pouvez également utiliser .toggle() au lieu de .Show() pour afficher/cacher.

Answer 2

Vous devriez probablement vérifier ce question où quelque chose de similaire est fait.

Fondamentalement, vous devez d'abord configurer des ID pour vos éléments afin que vous puissiez identifier les é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 pour saisir les frères et sœurs dans le documentation here.