使用eventListener获取同class图片的data-index，forEach报错如何解决

1. 调用forEach报错的核心原因：document.getElementsByClassName()返回的是HTMLCollection类数组对象，不属于标准JS数组，没有内置forEach方法。
2. 额外适配要求：图片是innerHTML动态生成的，若绑定事件的代码早于DOM渲染执行，或者后续新增同类型图片，直接逐个绑定的方式会失效。

推荐方案：事件委托（适配动态渲染场景，性能更优） #

直接将点击事件绑定在图片的父级容器上，通过事件冒泡机制捕获点击事件，不需要遍历所有图片，后续动态新增的图片也无需重复绑定事件：

// 替换为你实际挂载图片的父容器选择器，比如包裹这些img的div的选择器，也可以直接用document
const imgParent = document.querySelector('.img-container');

imgParent.addEventListener('click', (e) => {
  // 校验点击目标是否是目标图片
  if (e.target.classList.contains('image')) {
    // 获取data-index属性，两种写法均可
    const curIndex = e.target.dataset.index;
    // const curIndex = e.target.getAttribute('data-index');
    console.log(curIndex);
    // 后续业务逻辑写在这里
  }
})

备选方案：转换类数组后逐个绑定 #

如果需要单独给每个图片绑定事件，先把HTMLCollection转换为标准数组再遍历，注意这段代码必须在动态渲染图片的逻辑执行完成后再运行：

// 两种类数组转数组的方式选一种即可
const images = Array.from(document.getElementsByClassName('image'));
// const images = [...document.getElementsByClassName('image')];

images.forEach(el => {
  el.addEventListener('click', function() {
    console.log(this.dataset.index);
  })
})

你提供的img模板代码中data-index="${index})"多了一个多余的右括号，建议修正为data-index="${index}"，否则获取到的index值会携带多余符号。

内容的提问来源于stack exchange，提问作者Caeculus