선택한 클래스의 내용을 표시하는 방법 Jquery

Question

나는 다중 선택 스타일 퀴즈를 만들기 위해 결합 된 html/jquery/css를 가지고 있습니다.이 퀴즈는 꽤 잘 작동합니다. 사용자가 선택 항목을 클릭하면 선택 목록이 해당 대답으로 바뀝니다. 문제의 끝 부분에 작업 코드 링크를 추가했습니다.

사용자가 질문의 끝에 도달했을 때를 이해하고 별도의 텍스트 블록을 추가 할 수 있도록 가장 최근에 선택한 선택 항목의 HTML 콘텐츠를 확인하고자하지만이 작업을 수행하기 위해 애 쓰고 있습니다. .

특히 내가하고 싶은 것을 좁히고, 읽기 쉽게하기 위해 코드를 작성했습니다.

$('div[class*=inlinechoice').on('click','.question', function(e) { 
    var $this = $(this), 
    $id = $this.prop('id'); 
    alert($('[class*="answer-"]').eq($id).text()); 
    }); 

을 그리고 HTML은 다음과 같습니다 : 자바 스크립트는 다음과 같습니다

<div class="inlinechoice-0" id="0"> 
    <a class="question" id="1">Choice 1</a><br> 
    <a class="question" id="2">Choice 2</a><br> 
    <a class="question" id="3">Choice 3</a> 
    </div> 

    <div class="answer-1"> 
    You picked 1. 
    <div class="inlinechoice-1" id="1"> 
    <a class="question" id="4">Choice 4</a><br> 
    <a class="question" id="5">Choice 5</a><br> 
    </div> 
    </div> 
    <div class="answer-2"> 
    You picked 2. 
    </div> 
    <div class="answer-3"> 
    You picked 3. 
    </div> 
    <div class="answer-4"> 
    You picked 4. 
    <div class="inlinechoice-2" id="2"> 
    <a class="question" id="6">Choice 6</a><br> 
    <a class="question" id="2">Choice 7 (2)</a><br> 
    </div> 
    </div> 
    <div class="answer-5"> 
    You picked 5. 
    </div> 
    <div class="answer-6"> 
    You picked 6. 
    </div> 

을 그리고 마지막으로 CSS는 다음과 같습니다 : 나는의 codepen 링크를 첨부

div[class*='inlinechoice-'] { cursor: pointer; } 

    div[class*='answer-'] {display:none;} 

크롬에서는 작동하지 않지만 IE에서는 정상적으로 작동합니다.

이 작업이하는 것처럼 보이는 것은 선택한 답변 블록의 답변 텍스트를 가져 오는 것입니다. 따라서 선택 1을 클릭하면 경고는 사용자가 응답 2를 선택했음을 반환합니다. eq ($ id)가 실제로 색인을 다시 가져 오기 때문에 이해합니다. 그러나 $ id에서 1을 뺀 값을 얻을 수 있다고 생각했습니다. 정답이지만 전혀 작동하지 않는 것입니다 (경고는 단지 빈 상태로 반환됩니다). 색인에서 하드 코딩을 시도 했으므로, 예를 들어 .eq (0)은 answer-1의 내용을 반환하므로 작동 할 수 있다는 것을 알았지 만 반환하려면 하드 코드하지 않으려 고합니다. 사용자 입력에 기반한 정보 이것은 아마도 이것에 대한 최선의 방법조차되지 않을 것입니다 (id 번호를 빼고 1을 뺀 다음 eq() 함수에 추가하는 것이 힘들어 보입니다). 그러나 나는 하루 종일 여기에 있었고 이것은 가장 가까운 것입니다 나는 그럭저럭 필요한 것을 되 찾는 것에 도착할 수 있었다. 전체 프로젝트의

Codepen는 here (그러나 중첩 된 선택 1, 그것은 선택 2와 3에 내용을 추가,이 거의 노력하고 있습니다.) 제거 코드의

Jsfiddle이 here

Answer 1

입니다

당신은 자바 스크립트 대신 ID를 연결하는 당신을 변경할 수 있습니다 :

$('.inlinechoice-0').on('click','.question', function(e) { 
    var $this = $(this), 
     $id = $this.prop('id'); 
    alert($('.answer-' + $id).text()); 
});