时间戳

首页 > 解决方案 > Javascript 点击特定元素总是使用错误/其他元素 id

javascript - Javascript 点击特定元素总是使用错误/其他元素 id

问题描述

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

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

我在这里看到了循环遍历类元素的其他解决方案（在本例中为“zoom_buttonClass”）。但是，当我尝试这样做时，无论页面上的按钮数量或单击了哪个按钮，列表中的最后一个按钮似乎都是被单击的按钮。

我需要始终检查是否单击了按钮，但是如何根据单击的 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);
};

标签： javascriptgetelementsbyclassname

解决方案

好吧，我又开始了，我想我可能已经找到了解决方案。它似乎工作。

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;
  }
}

推荐阅读