Question

我正在努力实现以下目标 - 从每个有4个多项选择答案的问题列表中，我需要通过在按下单选按钮后显示是否正确或不正确来显示用户是否已正确回答（立即）

以下是一个问题的示例：

<ol>
<li id="question_one">
<p><input type="radio" name="question_1" value="answer_1" />Corn</p>
<p><input type="radio" name="question_1" value="answer_2" />Cotton</p>
<p><input type="radio" name="question_1" value="answer_3" />Rice</p>
<p><input type="radio" name="question_1" value="answer_4" />Soybeans</p>
</li>
</ol>

<div id="q1_answer_1" class="show_answer">Corn 11.0%</div>
<div id="q1_answer_2" class="show_answer">Cotton 2.5%</div>
<div id="q1_answer_3" class="show_answer">Rice 11.0%</div>
<div id="q1_answer_4" class="show_answer">Soybeans 7.0%</div>

结果jquery：

$("#question_one input:radio:eq(answer_1)").click(function(){
$("#q1_answer_1").show(100);
});

$("#question_one input:radio:eq(answer_2)").click(function(){
$("#q1_answer_2").show(100);
});

$("#question_one input:radio:eq(answer_3)").click(function(){
$("#q1_answer_3").show(100);
});

$("#question_one input:radio:eq(answer_4)").click(function(){
$("#q1_answer_4").show(100);
});

我认为这不起作用，因为eq()只适用于数值？是否有相当于eq()的输入值？或者关于上述内容如何运作的任何其他建议？

非常感谢

Answer 1

如果您希望它更通用一些，您可以根据值来实现，如下所示：

$("#question_one :radio[name=question_1]").change(function() {
    $("div.show_answer").hide();
    $("#q1_" + $(this).val()).show(100);
});

You can give it a try here，或者如果你需要它更通用，假设你有多个问题，只需将上面的每个HTML块包装在一个容器中，例如<div class="question"></div>那么你可以做这样的事情：

$(".question :radio[name=question_1]").change(function() {
    $(this).closest(".question").find("div.show_answer").hide()
           .filter("[id$='" + $(this).val() +"']").show(100);
});

You can test that version here，它可以解决多个问题，而不会为每个问题重复代码。

对于评论：要在第一次点击后杀死它，您有几个选项，可以通过将其添加到处理程序（test here）来禁用它们：

$(this).closest('li').find(':radio').attr('disabled', true);

或者，如果您想要启用更改但不再显示答案，只需取消绑定（test here）：

$(this).closest('li').find(':radio').unbind('change');

Answer 2

尝试使用伪选择器：选中，如下所示： $（“＃question_one input：checked”）....

单选按钮 - 基于带有jQuery的选中按钮显示DIV

2 个答案: