JavaScript 新手 : what's the right way to apply the same behavior to multiple elements?

Question

我正在用 javascript 进行我的第一次冒险，完全没有我的方位。我想显示一个缩略图，它可以打开一个带有更大图片 View 的模态(这实际上是我唯一需要的前端功能，所以我尽量保持简单)。我复制了this来自 w3schools 的代码，它使用 getElementById。它适用于页面上的第一张图片，但单击后续图片不会弹出任何内容。阅读堆栈溢出，这听起来像是因为我在匹配 id，但页面上的每个元素将/应该有不同的 id(这是有道理的)。

我看到一个帖子 here人们通过附加元素的 id 使 id 唯一。我可以做类似的事情，但我 (a) 想检查它是否符合犹太洁食标准，并且 (b) 那么显然 id 将不再匹配，所以我会添加一些不同的属性来使我的 HTML 与我的样式相匹配吗？这一定是一个常见问题 - 将相同行为应用于页面上的多个元素的正确方法是什么？例如我可以给他们

谢谢!

更新:根据下面每个人的反馈，我修改了代码以使用 getElementByClassName 而不是 getElementById - 请参阅此处的要点:https://gist.github.com/dianekaplan/1602a7c0a1c1ec6aa103b61d6530ff15

如果我正确阅读了代码，那么我需要更改的重要行是从第 115 行到第 116 行-(根据 ClassName 而不是 id 设置图像信息)- 并将“myImg”替换为 popup'在样式第 5 行和第 11 行中，但是单击第一张图像不再打开模式，所以我错过了一些东西。有人看到我需要它才能工作的问题吗？

Answer 1

您应该使用类名(在所有 img 中都相同)而不是 id，然后使用 getElementsByClassName() 获取所有类名，而不是 getElementsById()只有一个(因为 ID 必须是唯一的)。

然后，您应该以某种方式存储全尺寸图像的 url，以便无论单击哪个 img 都能获取它。一种方法可能是使用数据属性。

例子:

<img src="thumb1.jpg" data-fullsize="full1.jpg" class="popup">
<img src="thumb2.jpg" data-fullsize="full2.jpg" class="popup">
<img src="thumb3.jpg" data-fullsize="full3.jpg" class="popup">

---

var elems=document.getElementsByClassName("popup");
for(var i=0;i<elems.length;i++) {
    elems[i].onclick=function() {
         var fullsize=this.dataset.fullsize;
         //open de popup, fullsize has the clicked image url
    }
}

代码未经测试，仅供引用。