javascript - imageSwap onClick 通过 javascript 未触发

Question

如 following example 中所示

交换图像的脚本(通过 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() 调用，您很快就会发现没有带有 Frame id 的元素。

$("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");
})