如何点击HTML元素获取对应JavaScript对象的信息

我猜你已经把ItemCollection里的商品都渲染到页面的#Collection容器里了对吧？现在你的点击事件只能拿到元素的索引，其实只要利用这个索引去数组里取对应的对象，就能轻松拿到名称、价格或者图片地址啦！

修改后的点击事件代码 #

var ItemCollection = [ 
  { Name: 'IVY PARK SHOES', Price: 160, Picture: 'https://assets.adidas.com/images/w' }, 
  { Name: 'JOGGER SHOES', Price: 160, Picture: 'https://assets.adidas.com/images/w_840,h_840,f_' }, 
  { Name: 'ULTRABOOST SHOES', Price: 200, Picture: 'https://assets.adidas.com/images/w_840,h_840,f_auto,q' }, 
  { Name: 'NITE SHOES', Price: 130, Picture: 'https://assets.adidas.com/images/w_840,h_840,f_a' }, 
];

var collectionContainer = document.getElementById('Collection'); 
for (var i = 0, len = collectionContainer.children.length; i < len; i++) { 
  (function(index){ 
    collectionContainer.children[index].onclick = function(){ 
      // 通过索引获取对应的商品对象
      const currentItem = ItemCollection[index];
      // 这里可以根据需求展示不同信息，示例先把所有信息alert出来测试
      alert(`商品名称：${currentItem.Name}\n价格：$${currentItem.Price}\n图片地址：${currentItem.Picture}`);
      
      // 如果只需要单独获取某一项，比如只取名称：
      // const itemName = currentItem.Name;
      // 或者只取价格：
      // const itemPrice = currentItem.Price;
      // 之后可以把这些信息用在你需要的地方，比如更新页面展示等
    } 
  })(i); 
}

代码说明 #

• 你原来写的闭包已经帮你保存了每个元素对应的index，直接用这个index去ItemCollection数组里就能拿到完全匹配的商品对象
• 拿到currentItem之后，你可以随意访问它的Name、Price、Picture属性，不用再局限于只获取索引
• 示例里用alert展示了所有信息，你可以根据实际需求改成更新页面DOM、弹出详情弹窗等操作

另外，如果你是用循环渲染的元素到页面，其实可以在渲染的时候就把商品的索引通过data-*属性绑定到元素上，这样点击事件里不用闭包也能拿到对应对象，更高效：

// 假设你是这样渲染元素的（示例）
ItemCollection.forEach((item, index) => {
  const itemElement = document.createElement('div');
  // 绑定索引到data-index属性
  itemElement.dataset.index = index;
  // 填充元素内容，比如商品名称、图片等
  itemElement.innerHTML = `<img src="${item.Picture}" alt="${item.Name}"><p>${item.Name} - $${item.Price}</p>`;
  collectionContainer.appendChild(itemElement);
});

// 点击事件用事件委托（不用给每个元素绑定单独事件）
collectionContainer.addEventListener('click', function(e) {
  // 找到点击的商品元素（根据实际元素类型调整选择器）
  const targetItem = e.target.closest('[data-index]');
  if (!targetItem) return;
  const index = parseInt(targetItem.dataset.index);
  const currentItem = ItemCollection[index];
  // 同样可以获取属性信息
  console.log('当前商品：', currentItem);
});

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