Question

我使用以下HTML / JavaScript代码创建了一个网页，我可以通过点击缩略图来更改更大的图像：

<script type="text/javascript">
    function ChangeImage(a) {
    document.getElementById("viewer").src = a;
    }
</script>

<section>
    <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot1.JPG" onclick="ChangeImage("/images/FormalHeadshot1.JPG");">
    <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot2.JPG" onclick="ChangeImage("/images/FormalHeadshot2.JPG");">
    <img class="thumbnail" src="/images/Thumbnails/Performing.JPG" onclick="ChangeImage("/images/Performing.JPG");">
    <img class="thumbnail" src="/images/Thumbnails/Playing.JPG" onclick="ChangeImage("/images/Playing.JPG");">
    <img class="thumbnail" src="/images/Thumbnails/InformalHeadshot.JPG" onclick="ChangeImage("/images/InformalHeadshot.JPG");">

    <br>

    <img id="viewer" src="/images/FormalHeadshot1.JPG">

</section>

任何想法为什么当我点击缩略图时，大图片没有任何反应？我对JavaScript很新，所以我可能会遗漏一些明显的东西，但我所做的研究似乎并没有解决问题。

Answer 1

您需要在内部使用单引号而不是双引号，或者避开双引号。

“需要＆amp; quot;

或只是单引号'

例如，

 <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot1.JPG" onclick="ChangeImage('/images/FormalHeadshot1.JPG');">

Answer 2

尝试将你的JS代码放在这个html下面。

Answer 3

只有你调用标签img，只调用最后一个的id查看器，这些标签img没有onclick ChangeImage。对于其他标签，您需要为每个标签生成不同的id并调用类标签。

Answer 4

这是代码。

<script type="text/javascript">
  function ChangeImage(a) {
      document.getElementById("viewer").src = a;
  }
</script>
<section>
  <img class="thumbnail" src="http://goo.gl/Cdfnd" onclick="ChangeImage('http://goo.gl/phiUS');" />
  <img class="thumbnail" src="http://goo.gl/VmUjM" onclick="ChangeImage('http://goo.gl/YLr0i');" />
  <!--
  More images here
  -->
  <br/>
  <img id="viewer" src="http://goo.gl/phiUS" />
</section>

这是jsFiddle只是加入http://jsfiddle.net/99V75/show/

单击缩略图图像时使用JavaScript更改大图像

4 个答案: