0

我使用以下 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 有点陌生，所以我可能遗漏了一些明显的东西，但我所做的研究似乎并没有解决问题。

4

4 回答 4

2

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

“需要”

或只是一个单引号 '

例如，

 <img class="thumbnail" src="/images/Thumbnails/FormalHeadshot1.JPG" onclick="ChangeImage('/images/FormalHeadshot1.JPG');">
于 2013-05-06T00:23:12.627 回答
1

尝试将您的 JS 代码放在此 html 下方。

于 2013-05-06T00:27:09.913 回答
0

这是代码。

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

于 2013-05-06T03:57:35.080 回答
0

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

于 2013-05-06T00:26:36.787 回答