jQuery Controllo di DIV singoli con la stessa classe (fratelli?)

Question

Sto creando un modulo FAQ per il mio sito e voglio essere in grado di controllare singoli elementi nella pagina anche se hanno tutti la stessa classe. Credo che questo si verifichi in fratelli con i quali non ho ancora familiarità.

Fondamentalmente voglio che l'utente sia in grado di fare clic sul div della domanda e poi quando lo fa clic la div della risposta all'interno dello stesso div del div della domanda è impostata per mostrare (se questo ha senso!). Qualsiasi aiuto sarebbe molto apprezzato.

<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

Se capisco correttamente la tua domanda, dovresti Inizia impostando tutte le risposte come nascoste nel CSS: .answer {display: none;}

Quindi puoi usare jquery per mostrare la risposta corretta alle domande cliccate:

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

Modifica: puoi anche usare .toggle () invece di .show () per mostrare / nascondere.

Answer 2

Probabilmente dovresti dare un'occhiata a questa domanda dove si fa qualcosa di simile.

Fondamentalmente, devi prima impostare gli ID per i tuoi elementi in modo da poter identificare singoli elementi all'interno delle classi impostate.

È quindi possibile aggiungere un gestore eventi click che imposti l'elemento selezionato e mostri la risposta appropriata.

Puoi vedere la sintassi per catturare fratelli nella documentazione qui .