Question

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

仅使用Javascript（因为我不使用jquery），我试图将相同的几行代码应用于所单击的相应按钮，不同之处在于必须将ID标签“连接”到一个基于所单击按钮的变量。

我在这里看到了遍历类元素（在本例中为“ zoom_buttonClass”）的其他解决方案。但是，当我尝试执行此操作时，无论页面上的按钮数或单击的是哪个按钮，列表中的“ LAST”按钮始终似乎是被单击的那个按钮。

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

我的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总是使用错误/其他元素ID

1 个答案: