同じクラスの単一のDIVを制御するjQuery（兄弟？）

Question

サイト用のFAQモジュールを作成しています。すべてのクラスが同じであっても、ページ上の単一の要素を制御できるようにしたいと考えています。これは私がまだよく知らない兄弟の下にあると思います。

基本的に、ユーザーが質問divをクリックし、それをクリックすると、質問divと同じ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>

<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

あなたの質問を正しく理解したら、 CSSですべての回答を非表示に設定することから始めます。 .answer {display：none;}

次に、jqueryを使用して、クリックされた質問に対する正しい答えを表示できます。

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

編集：.show（）の代わりに.toggle（）を使用して表示/非表示にすることもできます。

Answer 2

おそらく、質問を確認してください。同様のことが行われています。

基本的に、最初に要素のIDを設定して、セットクラス内の単一の要素を識別できるようにする必要があります。

選択したアイテムを設定し、適切な回答を表示するクリックイベントハンドラーを追加できます。

ドキュメントで兄弟をつかむための構文を見ることができます。