Question

我如何访问所单击项目的索引？

2023-01-13

48

javascript html function foreach

我正在为一个学校项目建立一个商店部分。它的工作方式就像一个画廊：单击卡片时，会打开一个新显示屏，其中包含有关产品的全屏信息：图片、产品标题、价格……我已设法将全屏显示的图像与单击的图像匹配（由于它是一个相对 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");
})

我不知道如何通过每个项目的索引获取 innerHTML。我尝试使用 for 循环和函数中的参数“miniatura”。 CodePen 这里。

Answer 1

您可以将每个 miniatura 的索引作为传递给 forEach 的处理程序函数的第二个参数。您可以在 addEventListener 的主体中访问此索引，如下所示：

miniaturas.forEach(function(miniatura, index){
    miniatura.addEventListener("click", function(evento){
        evento.preventDefault();
        imgModal.setAttribute("src",miniatura.getAttribute("href"));
        modal.classList.add("visible");
      
        // instead of for loop, use `index` to access
        // the corresponding elements in the arrays:
        plantNameModal.innerHTML = plantNames[index].innerHTML;
    })
});

我已分叉您的 Pen。