imageSwap onClick via javascript not firing

Question

如以下示例所示

交换图像的脚本(通过 Rails<%= javascript_tag do %>生成( 标签(

<script>
//<![CDATA[
$("input[type=radio]").on("change", function() {
var Frame_image = $("input[name=Frame]:checked").val();
$("#Frame").attr("src", "/Mirra_2/small/Frame_" +  Frame_image  + ".png");
})
//]]>
</script>

基于源(代码段(

<table> <tr>
<td style='vertical-align: top;'>
<label><input type="radio" class='imagepick' id="Frame_6K8" name="Frame" value="6K8"><img src="/assets/Mirra_2/colours/6K8-f0d0fc886240ff430ef97b3f98ac23bf26f290b772bcb840460549cd61d15028.jpg" />Studio White / H-Alloy</label>
</td>
<td style='vertical-align: top;'>
<label><input type="radio" class='imagepick' id="Frame_6K7" name="Frame" value="6K7"><img src="/assets/Mirra_2/colours/6K7-8052fe7aa605d525981035af0c1367d1d3808390b63bb29437f515cc63b58e8c.jpg" />Graphite / H-Alloy</label>
</td> [...]

注意初始图像位于正文的第一部分

javascript 未在控制台中生成任何错误。 要交换的图像存在。 然而，单击选项不会导致图像交换。

为什么？

Answer 1

对于此类问题，请花时间调试代码，看看出了什么问题，并验证您在每一步都获得了预期的结果。

如果您添加了这样的 console.log(( 调用，您将很快发现您没有具有Frameid 的元素。

$("input[type=radio]").on("change", function() {
var Frame_image = $("input[name=Frame]:checked").val();
console.log(Frame_image);
console.log("#Frame");
$("#Frame").attr("src", "/Mirra_2/small/Frame_" +  Frame_image  + ".png");
})