javascript - 画廊。显示与点击的 <li> 项对应的 div。 Javascript

Question

我正在尝试构建一个基本图库，它根据单击的图像显示大图像 [div]。缩略图存储在基本的无序列表中。

我是一个 javascript 菜鸟，我可以使用 getElementById 来更改显示类等，但我不希望每个图像都有一个单独的函数，它们可能有 100 个左右。

有没有办法调用相同的函数来根据点击的图像显示不同的 div [该图像的放大版本]？

所以: 如果点击 img1 显示 divA， 如果点击 img2 显示 divB， 如果点击 img3 显示 divC...

非常感谢。

Answer 1

传递给 onclick 方法的事件有一个 target 参数，它指的是被点击的元素。

请发布您的代码，最好是在有效的 JsFiddle 中，以获得更有针对性的答案。

这是您想要实现的目标的一般示例:

document.onclick = function(e) {
    // e.target is the img that was clicked, display the corresponding div

    // Get the image number from the id
    var number = e.target.id.substr(3)

    // Display the corresponding div
    document.getElementById('div' + number).style.visibility = 'visible';
}

请注意，最后一行在您的实现中很可能会有所不同——我不知道您是如何显示这些 div 的。