用户点击图片时如何正确打印对应对象的OfferName值？

现有代码的核心问题 #

• 点击事件触发的userClicked函数没有和点击的图片做对应匹配，循环第一次执行就直接返回了数组第一个元素的OfferName，永远拿不到点击图片对应的数据
• 全局的console.log(offerName)会在页面加载时直接执行，此时还没有触发点击事件，输出永远是空值
• 用var声明循环变量i存在闭包问题，绑定事件时i最终会固定为图片集合长度的最大值，无法匹配对应索引

实现逻辑 #

给每个图片元素存储对应数组项的索引，建立图片和数组项的一一对应关系，点击时直接通过存储的索引拿到对应数据的OfferName打印即可。

修正后代码 #

// 这里替换为你的原始数据数组
const array = [
  // 示例数据：{id: 5933, desc: 'game', OfferName: 'blitz', Template: 'nonfeatured', SortIndex: 0},
  // 其余21条数据...
];
const imgs = document.getElementsByClassName('items');

// 循环绑定点击事件
for (let i = 0; i < imgs.length; i++) {
  // 给每个图片元素存储对应数组的索引
  imgs[i].dataset.index = i;
  imgs[i].addEventListener('click', function() {
    // 点击时读取存储的索引，拿到对应OfferName打印
    const currentIndex = Number(this.dataset.index);
    const currentOfferName = array[currentIndex].OfferName;
    console.log(currentOfferName);
  }, false);
}

补充说明 #

如果你的图片排序和数组排序不一致，可以把数组项的唯一id（比如示例里的id: 5933）存在图片的dataset属性里，点击后遍历数组匹配对应id的项，再提取OfferName即可。

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