javascript - 放大缩略图 onClick

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