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

标签 javascript image onclick src

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

最佳答案

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

“必须是”

或者只是一个单引号 '

例如,

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

关于javascript - 单击缩略图时使用 JavaScript 更改大图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16390439/

相关文章:

javascript - 访问被 CORS 策略阻止的 Web list

javascript - 删除文件,文件属性无法读取未定义

android - Android中的OpenCV图像比较和相似性

python - Python中频谱图的FFT

javascript - 从多个输入创建数组

javascript - React 和 Meteor "Uncaught TypeError: Cannot read property ' createElement' of undefined"

python - 在处理图像时删除文本

javascript - 按钮和div的onclick事件有什么区别?

javascript - 2 个 JavaScript 事件按顺序触发 - 第 2 个被忽略

events - ZK如何停止tab的OnClick事件?