单选按钮 - 使用 jQuery 显示基于选中按钮的 DIV

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，它可以解决多个问题，而无需为每个问题复制代码。

---

对于 cmets： 要在第一次单击后终止它，您有几个选项，您可以通过将其添加到处理程序来禁用它们 (test here)：

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

或者，如果您想启用更改但不再显示答案，只需解除绑定 (test here)：

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

Answer 2

尝试使用伪选择器 :checked，如下所示： $("#question_one input:checked")....