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

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

你需要使用单引号而不是双引号，或者转义双引号。

或者只是一个单引号

例如,

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

Answer 2

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

Answer 3

代码如下:

<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/