jQuery que controla DIV individuales con la misma clase (¿hermanos?)

Question

Estoy creando un módulo de preguntas frecuentes para mi sitio y quiero poder controlar elementos individuales en la página a pesar de que todos tienen la misma clase. Creo que esto viene bajo hermanos con los que aún no estoy familiarizado.

Básicamente, quiero que el usuario pueda hacer clic en el div de preguntas y luego, cuando lo hacen, el div de respuestas dentro del mismo div que el div de preguntas está configurado para mostrar (¡si eso tiene sentido!). Cualquier ayuda sería muy apreciada.

<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 entiendo tu pregunta correctamente, deberías Comience configurando todas las respuestas como ocultas en el CSS: .answer {display: none;}

Luego puede usar jquery para mostrar la respuesta correcta a las preguntas clicadas:

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

Editar: también puede usar .toggle () en lugar de .show () para mostrar / ocultar.

Answer 2

Probablemente debería consultar esta pregunta donde se hace algo similar.

Básicamente, primero debe configurar las ID de sus elementos para poder identificar elementos individuales dentro de las clases establecidas.

A continuación, puede agregar un controlador de eventos de clic que establezca el elemento seleccionado y muestre la respuesta adecuada.

Puede ver la sintaxis para capturar hermanos en la documentación aquí .