如何获取点击元素的索引以匹配模态框中的商品信息？

我正在为学校项目制作一个商店模块，运作逻辑类似画廊：点击商品卡片时，会弹出全屏窗口展示商品图片、名称、价格等信息。目前已经实现点击卡片时，全屏窗口的图片能和对应卡片的图片匹配（因为用了相对URL，看不到实际图片），但还没法匹配商品名称等其他信息。

现有代码 #

const miniaturas = document.querySelectorAll(".galeria a");
const modal = document.querySelector(".modal");
const imgModal = document.querySelector(".modal img");
const plantNames = document.querySelectorAll(".galeria h3")
const plantNameModal = document.querySelector(".modal h3");

miniaturas.forEach(function(miniatura){
    miniatura.addEventListener("click", function(evento){
        evento.preventDefault();
        imgModal.setAttribute("src",miniatura.getAttribute("href"));
        modal.classList.add("visible");

        for(i = 0; i < miniaturas.length; i++){
            plantNameModal.innerHTML = plantNames[i].innerHTML;
        }
    })
})

modal.addEventListener("click", function(){
    modal.classList.remove("visible");
})

我尝试过用for循环和函数参数miniatura，但不知道怎么通过每个元素的索引获取对应innerHTML。

你可以借助forEach的第二个参数直接获取当前元素的索引，以此匹配对应商品的信息，无需额外写for循环。修改后的代码如下：

const miniaturas = document.querySelectorAll(".galeria a");
const modal = document.querySelector(".modal");
const imgModal = document.querySelector(".modal img");
const plantNames = document.querySelectorAll(".galeria h3")
const plantNameModal = document.querySelector(".modal h3");

// 给forEach添加index参数，获取当前元素的索引
miniaturas.forEach(function(miniatura, index){
    miniatura.addEventListener("click", function(evento){
        evento.preventDefault();
        imgModal.setAttribute("src",miniatura.getAttribute("href"));
        modal.classList.add("visible");
        // 通过索引匹配对应的商品名称
        plantNameModal.innerHTML = plantNames[index].innerHTML;
    })
})

modal.addEventListener("click", function(){
    modal.classList.remove("visible");
})

关键修改说明 #

• 在miniaturas.forEach的回调函数中添加index参数，这个参数会自动返回当前遍历元素的索引位置
• 点击事件触发时，直接用该索引去plantNames集合中获取对应商品的名称，赋值给弹窗里的标题元素，这样就能实现点击卡片和弹窗信息的一一对应

内容的提问来源于stack exchange，提问作者Gabriel Martín