1

我想简化这段代码，并喜欢任何建议。

页面结构：

  • 有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();
});

Action 1 和 Action 2 之间唯一不同的是向用户显示反馈的父 div。

4

1 回答 1

2

一个简单的改进是使用单选按钮而不是复选框，您可以删除这些行：

$('.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 回答