javascript - 如何捕获迭代数组的索引(Javascript)

Question

我试图在每次迭代时获取数组内的索引，但我只获取该数组的长度。我该怎么办？

我在HTML代码中创建了一个其他div的外部，每个div都包含一张带有小图标的照片来打开模态，所以我希望模态外部的图像源发生变化并获取值每次当我单击图像时，该索引(在带有小图像的数组中)。非常感谢您的帮助 :) 这是我的代码:

for (var i = 0; i < zoom.length; i++)
{
    zoom[i].addEventListener('click', () => 
    {
        openModal();
    })
}

function openModal()
{
        j = i;
        image.src = './img/screenshotSite' + j + '.png';
        modal.style.display = 'block';
        document.getElementsByTagName('*')[0].style.overflow = 'hidden';

}

Answer 1

您可以使用forEach 循环遍历数组。这确保了作为参数传递给 openModal 时索引值的正确性:

// I suppose this is an HTMLCollection, so need this to transform into an array
[...zoom]
  .forEach( (element, index) =>
    element.addEventListener('click', () => openModal(index) )
  );

function openModal(index)
{
  image.src = './img/screenshotSite' + index + '.png';
  modal.style.display = 'block';
  document.getElementsByTagName('*')[0].style.overflow = 'hidden';
}