通过 onclick 访问 Javascript 数组中的子元素（for 循环）

Question

我正在循环遍历这样的数组：

<% thoughts.docs.forEach(function(thought, i) { %>
    <div class="square-box-container">
        <div class="pyp-image-container">
            <div class="image-overlay">

默认情况下，元素 class 名称 'image-overlay' 被隐藏并显示：'none'。我正在尝试创建一个带有 onclick 事件的函数，因此当用户单击 div 'square-box-container' 时，该元素的图像覆盖仅更改为显示：'block'.

目前我有以下代码，但我认为我的内部循环有误，因为当我点击一个方框容器时，所有方框容器的图像覆盖更改为显示：'block'，如仅反对该容器覆盖。谁能告诉我做错了什么？

  var containerItems = document.getElementsByClassName("square-box-container");
  var overlayItems = document.getElementsByClassName("image-overlay");

  for (var i = 0; i < containerItems.length; i ++) {
      containerItems[i].onclick = function() {
        for (var i = 0; i < overlayItems.length; i ++) {
          overlayItems[i].style.display = 'block';
        }
      }
  }

我不是很熟悉子节点的使用，这是这里所要求的吗？谢谢

Answer 1

如果您只想更改关联元素的显示，请不要在点击处理程序中循环 - 并使用 let 而不是 var。

for (let i = 0; i < containerItems.length; i++) {
    containerItems[i].onclick = function () {
        overlayItems[i].style.display = 'block';
    }
}

另一种选择是完全省略 overlayItems 集合，而是从单击的元素导航。

for (const container of document.getElementsByClassName("square-box-container")) {
    container.addEventListener('click', (e) => {
        e.currentTarget.querySelector('.image-overlay').style.display = 'block';
    });
}

通过 onclick 访问 Javascript 数组中的子元素（for 循环）

Accessing child elements in Javascript array via onclick (for loop)

javascript

arrays

children

for-loop