时间戳

首页 > 解决方案 > imageSwap onClick 通过 javascript 不触发

javascript - imageSwap onClick 通过 javascript 不触发

问题描述

如以下示例所示

交换图像的脚本（通过 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 不会在控制台中生成任何错误。要交换的图像存在。然而，点击选项不会导致图像交换。

这是为什么？

标签： javascriptruby-on-rails

解决方案

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

如果你添加了这样的 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");
})

推荐阅读