1

このコードを簡素化したいので、提案をお待ちしています。

ページの構造:

  • 10 の異なるセクションがあります。
  • 各セクションには質問があります。
  • 各質問には 3 つの回答があります。
  • 各回答にはチェックボックスがあります。
  • ユーザーがチェックボックスをオンにすると、その特定の回答に対するフィードバックが表示されます。
  • ユーザーが別のチェックボックスをオンにすると、他のすべての回答とチェックボックスがリセットされます。

この作業を 3 つの関数で機能的に作成しました。各回答に 1 つ。これをすべてのセクションで機能させるには、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 です。

4

1 に答える 1

2

簡単な改善の 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();
});
于 2012-10-12T19:07:07.740 に答える