Question

我是javascript的新手，几个小时都尝试了很多东西，但没有任何效果。

我会通过点击缩略图来改变一个大的压力。

直到现在我得到了以下脚本。真的不多......： - （

<script type="text/javascript">
    function changeImage() {
        document.getElementById("img").src="img/upload/test1.jpg";
    }
</script>

<img id="img" name="change" src="img/upload/test.jpg">
<img src="img/thumbnail/test.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">
<img src="img/thumbnail/test1.jpg" alt="" id="imgClickAndChange" onclick="changeImage()">

所有大图都在src"img/upload/xxx.jpg"下，所有缩略图都在src="img/thumbnail/xxx.jpg"下。当我点击缩略图时，它必须改变大图，它必须在javascript中给出参数。与onclick="changeImage(xxx.jpg)一样。

问题是每个页面都有其他图片。我从数据库中获取它们。所以图片的名称就像一个变量。我希望你明白。我很难解释。： - （

提前感谢您的帮助。

Greets Yanick

Answer 1

将image parameter传递给function，

function changeImage(image) {
    document.getElementById("img").src=image;
}

<img src="img/thumbnail/test.jpg" alt="" id="img" 
            onclick="changeImage('img/upload/test1.jpg')" />

Answer 2

保持ids独特。出于各种实际原因，DOM元素“必须”拥有唯一的ID。
虽然您可以进行内联onclick，但更好的方法是继续使用它。具体如下。

假设您在客户端或服务器上拥有从某个模板库生成的图像，请将包含图像源和公共类的数据属性添加到所有这些元素中，并添加来自Javascript的事件侦听器。匹配类并拾取数据属性以替换图像源的元素。

javascript通过单击缩略图更改图像

2 个答案: