형제 요소의 자식을 선택하는 방법

Question

지금 시도하고있는 것은 선택을 설정하고 점수를 기록하는 제출 단추를 사용하는 것입니다. DOM을 트래버스하는 방법에 어려움을 겪고 있습니다. 나는 형제의 아이를 선택하려고 노력하고 있다고 생각합니다. 그리고 왜 현재 코드가 그 목적을 위해 작동하지 않는지 잘 모르겠습니다.

<div class='section' id='s1'> 
    <div class='center' id='center1'> 
     <div class='question' id='q1'> 
     </div> 
     <div class='choices' id='choices1'> 
      <p class='a'>Choice A</p> 
      <p class='b'>Choice B</p> 
      <p class='c'>Choice C</p> 
      <p class='d'>Choice D</p> 
     </div> 

     <input type='submit' value='Submit' class='submit'> 
     <p class='score'></p> 
    </div> 
</div> 

var score = 0; 
$('.choices p').on('click', function() { 
    $(this).closest('.choices').find('p').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

$('.submit').click(function() { 
    var choice = $(this).prev('.choices').children().find('selected'); 
    if (choice.hasClass('a')) { 
     score += 1; 
    } 
    else if (choice.hasClass('b')) { 
     score += 2; 
    } 

    $(this).prev('.choices').find('p').off('click'); 
    $('.score').text('Score is ' + score); 
}); 

Answer 1

왜

$('.choices p').on('click', function() { 
     $('.choices p.selected').removeClass('selected'); 
     $(this).addClass('selected'); 
}); 

$('.submit').click(function() { 
     var choice = $('.choices p.selected'); 
     if (choice.hasClass('a')) { 
      score += 1; 
     } 
     else if (choice.hasClass('b')) { 
      score += 2; 
     } 

     $('.choices p').off('click'); 
     $('.score').text('Score is ' + score); 
}); 

Answer 2

당신은 몇 가지 구문 오류가 있습니다. 어쩌면 이걸 해봐?

$('.choices p').on('click', function() { 
    $('.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

$('.submit').click(function() { 
    var score = 0; 
    var choice = $('.selected'); 
    if (choice.hasClass('a')) { 
     score += 1; 
    } 
    else if (choice.hasClass('b')) { 
     score += 2; 
    } 

    $(this).prev('.choices').find('p').off('click'); 
    $('.score').text('Score is ' + score); 
}); 

Answer 3

http://jsfiddle.net/tallrye/bqpg1a8L/ 안녕 난 당신이

.siblings()를 사용 할 수 있습니다 tallrye 답을 가고 싶어하지만 페이지에서 선택된 모든 클래스를 제거하지 않도록. removeClass ("selected")

그래서 div.choices 내에 선택된 클래스 만 제거합니다

여기에

<div class='choices' id='choices1'> 
     <p class='a'>Choice A</p> 
     <p class='b'>Choice B</p> 
     <p class='c'>Choice C</p> 
     <p class='d'>Choice D</p> 
</div> 

:

$('.choices p').on('click', function() {  
    $(this).addClass('selected').siblings().removeClass("selected"); 
});