JavaScript 코드 단순화

Question

이 코드를 단순화하고 싶습니다. 페이지

구조 :

• 가 10 개 단원으로 구성되어 있습니다.
• 각 섹션에는 질문이 있습니다.
• 각 질문에는 세 가지 답변이 있습니다.
• 각 답변에는 확인란이 있습니다.
• 사용자가 확인란을 선택하면 특정 답변에 대한 피드백이 표시됩니다.
• 사용자가 다른 확인란을 선택하면 다른 모든 대답 및 확인란이 재설정됩니다.

이 기능을 세 가지 기능으로 만들기 위해 기능적으로 만들었습니다. 각 대답마다 하나씩. 모든 섹션에서이 기능을 사용하려면 30 가지 기능을 만들어야합니다. 더 쉬운 방법이있을 것이라고 확신합니다. 어디서부터 시작해야할지 모르겠습니다.

내 코드

// Action 1 
$('.choice input.choice-a:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-1 .mod3-6-1_choice_A .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-1 .mod3-6-1_choice_A .mod3-6-1_feedback").focus(); 
}); 
$('.choice input.choice-b:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-1 .mod3-6-1_choice_B .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-1 .mod3-6-1_choice_B .mod3-6-1_feedback").focus(); 

}); 
$('.choice input.choice-c:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-1 .mod3-6-1_choice_C .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-1 .mod3-6-1_choice_C .mod3-6-1_feedback").focus(); 
}); 
// Action 2 
$('.choice input.choice-a:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-2 .mod3-6-1_choice_A .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-2 .mod3-6-1_choice_A .mod3-6-1_feedback").focus(); 
}); 
$('.choice input.choice-b:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-2 .mod3-6-1_choice_B .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-2 .mod3-6-1_choice_B .mod3-6-1_feedback").focus(); 

}); 
$('.choice input.choice-c:checkbox').on('change', function(){ 
    $('.choice input:checkbox').attr('checked', false); 
    $(this).attr('checked', true); 
    hide_choices(); 
    $("#action-2 .mod3-6-1_choice_C .mod3-6-1_feedback").removeClass("screen-reader"); 
    $("#action-2 .mod3-6-1_choice_C .mod3-6-1_feedback").focus(); 
}); 

조 1 조 (2) 사이의 상이한 유일한 사용자에게 피드백을 표시하는 상위 DIV이다.

Answer 1

간단하게 개선 할 수있는 방법은 대신 체크 박스의 라디오 버튼을 사용하는 것입니다, 당신은이 라인을 제거 할 수 있습니다 :

$('.choice input:checkbox').attr('checked', false); 
$(this).attr('checked', true); 

편집을. 내가 이것을 시도하는 방법은 다음과 같습니다. 입력 요소에는 data-action = "1"및 data-choice = "A"속성이 필요합니다.

$('.choice input').on('change', function(){ 
    var action = $(this).data('action'); 
    var choice = $(this).data('choice'); 

    $("#action-" + action).find(".mod3-6-1_choice_" + choice).find(".mod3-6-1_feedback").removeClass("screen-reader").focus(); 
});