Question

我正在尝试创建一种图像库，用户可以在其中查看一系列缩略图并单击它们以完整大小查看它们。我已经成功完成了这项工作，但我所做的工作方式需要大量重复的代码。以下是我对每张图片的示例：

脚本

function load1() {
    document.getElementById('wup').src = document.getElementById('wop1').src
            var myElement = document.querySelector("#wup");
            myElement.style.visibility = "visible";
            var myElementB = document.querySelector("button");
            myElementB.style.visibility = "visible";
            var myElementC = document.querySelector("#cover");
            myElementC.style.visibility = "visible";
    }

几乎所发生的事情是每个缩略图（有很多）都有一个在点击时运行的功能。它会在屏幕中央显示一个大图像，图像的来源是点击的缩略图。虽然这种方法确实有效，但它需要很多不必要的重复。

我在寻找什么：

一种简单而有效的方法来做同样的事情。

任何帮助将不胜感激！感谢。

Answer 1

只需创建一个为每个元素执行此操作的函数。

function showLargeImage(thumbnail) {
  document.getElementById('wup').src = thumbnail.src
  document.querySelector("#wup").style.visibility = "visible";
  document.querySelector("button").style.visibility = "visible";
  document.querySelector("#cover").style.visibility = "visible";
}

然后，对于每个图像，只需调用函数onclick。

<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>

在点击放大缩略图

1 个答案: