如何捕获迭代的数组的索引（Javascript）答案

【问题标题】：how to catch an index of an array that iterates (Javascript)如何捕获迭代的数组的索引（Javascript）
【发布时间】：2021-03-11 05:17:44
【问题描述】：

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

我在 HTML 代码中制作了其他 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';

}

【问题讨论】：

首先，我强烈建议您使用let & const 来声明变量，而不是var。其次，将i 的值传递给openModal 函数，这是本例中的索引。第三，请同时声明j，您目前没有声明它并立即对其进行初始化。它可能有效，但这是一种糟糕的编码习惯。
1.您正在循环内调用该函数，因此只需将 () 更改为对该函数的引用，然后再返回 2) 使用 this 来引用被单击的特定 html 元素。此外，当调用 openModel 处理程序时，您不会访问 for 循环内的 local 索引...

标签： javascript arrays indexing

【解决方案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';
}

【讨论】：

非常感谢在您的帮助下，经过一些研究，我学会了如何转换数组，那么您的方法使用起来要简单得多，非常感谢。我成功地重命名了我的照片，因为索引从 0 开始:)

【解决方案2】：

只需将for( var i=0 .... 切换为for( let i=0 .... 关于scope，let 和var 之间存在差异。更多信息请参阅SO answer。

【讨论】：