时间戳

首页 > 解决方案 > 如何捕获迭代的数组的索引（Javascript）

javascript - 如何捕获迭代的数组的索引（Javascript）

问题描述

每次迭代时，我都试图在数组中获取索引，但我只得到该数组的长度。我能怎么做 ？

我在 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';

}

标签： javascriptarraysindexing

解决方案

您可以使用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';
}

推荐阅读