jQuery Controlling Einzel DIVs Mit der gleichen Klasse (Geschwister?)

Question

Ich baue einen FAQ-Modul für meine Seite und ich mag sogar einzelne Elemente auf der Seite steuern können, obwohl sie alle die gleiche Klasse haben. Ich glaube, das unter Geschwistern kommt, die ich bin noch nicht vertraut sind.

Grundsätzlich mag ich die Benutzer in der Lage sein, die Frage div zu klicken und dann, wenn sie es die Antwort div innerhalb der gleichen div anklicken, wie die Frage div zeigt gesetzt ist (wenn der Sinn macht!). Jede Hilfe wäre sehr geschätzt.

<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

Wenn ich Ihre Frage richtig verstanden habe, sollten Sie Beginnen Sie, indem Sie alle Antworten Einstellung wie in der CSS versteckt: .answer {display: none;}

Dann können Sie Jquery verwenden, um die richtige Antwort auf die geklickt Fragen zu zeigen:

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

Edit:. Sie können auch verwenden .toggle () anstelle von .show () zum Anzeigen / Verbergen

Answer 2

Sie sollten wahrscheinlich diese Frage überprüfen wo etwas Ähnliches gemacht wird.

Grundsätzlich Sie zuerst müssen Setup-IDs für Ihre Elemente, so dass Sie einzelne Elemente innerhalb der festgelegten Klassen identifizieren können.

Sie könnten dann ein Click-Ereignishandler hinzufügen, die das ausgewählte Element und zeigen die passende Antwort gesetzt würde.

Sie können die Syntax sehen für die Geschwister in den Dokumentation hier greifen.