Javascript 点击特定元素总是使用 wrong/other 元素 id

Question

我有几个 html 页面，每个页面都有不同数量的按钮，这些按钮会根据页面内容显示。

仅 Javascript（因为我不使用 jquery），我试图将相同的几行代码应用于被单击的相应按钮，除了id 标签必须 'concatenated' 到一个基于被点击的相应按钮的变量中。

我在这里看到了循环遍历 class 元素的其他解决方案（在本例中为 "zoom_buttonClass"）。但是，当我尝试这样做时，无论页面上有多少个按钮或单击了哪个按钮，它始终是列表中最后一个似乎被视为已单击的按钮。

我需要始终检查按钮是否被单击，但如何根据实际单击的按钮应用操作？

我的 HTML 和 JS 代码片段如下：

提前致谢。

HTML代码：

<div class="modalClass" id="myModalID">
    <span class="closeModalClass" aria-label="Close Photo Enlargement Modal Box">&times;</span>
    <img class="modal_contentClass" id="modalEnlargementID">
</div>
<div id="captionID"></div>

JS代码：

for (var i = 0;i < document.getElementsByClassName("zoom_buttonClass").length;i++){
document.getElementsByClassName("zoom_buttonClass")[i].addEventListener('click', myFunction
  (var attribute = this.getAttribute("id");
    var photoIDstring = "photo"+counterX+"ID";
    document.getElementById('myModalID').style.display = "block";
    document.getElementById('captionID').style.display = "block";
    document.getElementById("modalEnlargementID").src = document.getElementById(photoIDstring).src;
    captionText.innerText = document.getElementById(photoIDstring).alt;
  ), false);
};

Answer 1

好吧，我又开始了，我想我可能想到了解决办法。好像还行。

var captionText = document.getElementById("captionID");
var howManyButtons = document.getElementsByClassName("zoom_buttonClass").length;
var buttonCollection = document.getElementsByClassName("zoom_buttonClass");
for (let i=0; i < howManyButtons; i++) {
  buttonCollection[i].onclick = function() {
  let photoIDstring = "photo"+(i+1)+"ID";
  document.getElementById('myModalID').style.display = "block";
  document.getElementById('captionID').style.display = "block";
  document.getElementById("modalEnlargementID").src = document.getElementById(photoIDstring).src;
  captionText.innerText = document.getElementById(photoIDstring).alt;
  }
}

Javascript 点击特定元素总是使用 wrong/other 元素 id

Javascript click on specific element always uses wrong/other element id

javascript

getelementsbyclassname