jQuery는 동일한 클래스로 단일 div를 제어합니다 (형제?)

Question

내 사이트 용 FAQ 모듈을 구축하고 있으며 모두 동일한 클래스를 가지고 있어도 페이지에서 단일 요소를 제어 할 수 있기를 원합니다. 나는 이것이 내가 아직 익숙하지 않은 형제 자매 아래에 온다고 생각합니다.

기본적으로 사용자가 질문 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를 설정해야합니다.

그런 다음 선택한 항목을 설정하고 적절한 답변을 표시하는 클릭 이벤트 핸들러를 추가 할 수 있습니다.

형제 자매를 잡기위한 구문을 볼 수 있습니다. 여기 문서.