单选按钮 - 使用 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);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

你可以在这里尝试一下，或者如果您需要更通用的方法，假设您有多个问题，只需将上面的每个 HTML 块包装在一个容器中，例如

那么你可以这样做：

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

你可以测试一下此处的版本，它将适用于多个问题，而无需为每个问题重复代码。

---

评论：要在第一次单击后杀死它，您有几个选项，您可以通过将其添加到处理程序来禁用它们（在这里测试)：

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

或者如果您想启用更改但不再显示答案，只需取消绑定它们即可 (在此处测试）：

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

Answer 2

尝试使用伪选择器 :checked，如下所示：
$(“#question_one 输入：已检查”)....