Javascript 为快照Firestore中的每个元素添加事件侦听器

我有以下代码，它从名为

横幅的Firestore集合中获取
快照
。每个对象都有以下结构

{
   index: // each object has index
   image: // url of source image
   link: // link to be redirected when clicked the image
}

这里是HTML代码，我从我的集合中动态地向HTML添加元素，在本例中我有
5
图像

<div id="homepage-background" class="background">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
      <img class="bg" src="https://firebasestorage.googleapis.com/v0/b....">
</div>

我的假设是，所有图像都已呈现为HTML，因为它们正确地显示在屏幕上。但只有在循环
i
被设置为最后一个索引之后。我必须提到，我还有一个脚本文件，负责在页面中滑动图像。它只是一个
setInterval（）
，每5秒运行一次，并从
div
向每个
img
添加
show
类。以下是脚本

  document.addEventListener(
    "load",
    function () {
      let slider = document.querySelector(".slider");
      let buttons = document.querySelectorAll(".btn");
      let slides = document.querySelectorAll(".img");
      let backgrounds = document.querySelectorAll(".bg");
      let options = document.querySelectorAll(".option");

      let element = document.getElementById("homepage-background");
      let numberOfChildren = element.getElementsByTagName("img").length;

      let index = 1;
      let op_index = 0;

      let size = slides[index].clientWidth;

      update();

      function update() {
        slider.style.transform = "translateX(" + -size * index + "px)";

        backgrounds.forEach((img) => img.classList.remove("show"));
        backgrounds[op_index].classList.add("show");

        options.forEach((op) => op.classList.remove("colored"));
        options[op_index].classList.add("colored");
      }

      function slide() {
        slider.style.transition = "transform .5s ease-in-out";
        update();
      }

      function btnCheck() {
        if (this.id === "prev") {
          index--;

          if (op_index === 0) {
            op_index = numberOfChildren - 1;
          } else {
            op_index--;
          }
        } else {
          index++;

          if (op_index === numberOfChildren - 1) {
            op_index = 0;
          } else {
            op_index++;
          }
        }
        slide();
      }

      slider.addEventListener("transitionend", () => {
        if (index >= numberOfChildren - 1) {
          return;
        }
        if (index <= 0) {
          return;
        }
        if (slides[index].id === "fist") {
          slider.style.transition = "none";
          index = slides.length - 2;
          slider.style.transform = "translateX(" + -size * index + "px)";
        } else if (slides[index].id === "last") {
          slider.style.transition = "none";
          index = 1;
          slider.style.transform = "translateX(" + -size * index + "px)";
        }
      });

      buttons.forEach((btn) => btn.addEventListener("click", btnCheck));
      options.forEach((option) => option.addEventListener("click", optionFunc));

      setInterval(btnCheck, 5000);
    },
    5000
  );

document.addEventListener(
“加载”，
函数（）{
让slider=document.querySelector（“.slider”）；
let buttons=document.queryselectoral（“.btn”）；
让幻灯片=document.queryselectoral（“.img”）；
让backgrounds=document.queryselectoral（“.bg”）；
let options=document.querySelectorAll（“.option”）；
let element=document.getElementById（“主页背景”）；
让numberOfChildren=element.getElementsByTagName（“img”）.length；
设指数=1；
设op_指数=0；
让大小=幻灯片[索引].clientWidth；
更新（）；
函数更新（）{
slider.style.transform=“translateX（“+-size*index+”px）”；
backgrounds.forEach（（img）=>img.classList.remove（“show”）；
背景[op_index].classList.add（“show”）；
options.forEach（（op）=>op.classList.remove（“有色”）；
选项[op_index].classList.add（“有色”）；
}
函数幻灯片（）{
slider.style.transition=“transform.5s ease-in-out”；
更新（）；
}
函数btnCheck（）{
如果（this.id==“prev”）{
索引--；
如果（op_索引===0）{
op_指数=儿童人数-1；
}否则{
op_指数--；
}
}否则{
索引++；
如果（op_索引===numberOfChildren-1）{
op_指数=0；
}否则{
op_index++；
}
}
幻灯片（）；
}
slider.addEventListener（“transitionend”，（）=>{
如果（索引>=numberOfChildren-1）{
返回；
}
如果（索引btn.addEventListener（“单击”，btn检查））；
options.forEach（（option）=>option.addEventListener（“单击”，optionFunc））；
设置间隔（BTN检查，5000）；
},
5000
);
页面呈现时，循环已终止且
i==5
，这就是测试警报始终显示5的原因

我同意您应该将元素与其索引相关联，并将其存储在循环中的某个位置

修改自：

。。。
for（设i=0；i

在开发人员控制台中测试并运行。
我可能只需在循环中的元素上设置一个
data-
属性，然后编写
click
函数来警告事件目标的数据值。您希望这段代码有什么不同？因为我们看不到您的数据或不知道您正在单击哪个元素，所以它很重要“我能看到发生了什么。@Marc我理解的是，我应该在循环中创建类似于
let currentImage=array[I].data（）；
的内容，并使用它而不是
array[I].data（）
？@DougStevenson我编辑了这篇文章，并提供了关于这个问题的更多细节。为了确认，src在循环中正确旋转，但索引只是记录为数组。长度-1基本正确？或者src也只是指向数组[4].image？谢谢你的回答。我使用了你的建议，但这次它总是向每个元素发出
4
警报，而不是像以前那样向
5
发出警报。我用新更新的代码编辑了这篇文章。
i before 0
i after 0
i before 1
i after 1
i before 2
i after 2
i before 3
i after 3
i before 4
i after 4

  document.addEventListener(
    "load",
    function () {
      let slider = document.querySelector(".slider");
      let buttons = document.querySelectorAll(".btn");
      let slides = document.querySelectorAll(".img");
      let backgrounds = document.querySelectorAll(".bg");
      let options = document.querySelectorAll(".option");

      let element = document.getElementById("homepage-background");
      let numberOfChildren = element.getElementsByTagName("img").length;

      let index = 1;
      let op_index = 0;

      let size = slides[index].clientWidth;

      update();

      function update() {
        slider.style.transform = "translateX(" + -size * index + "px)";

        backgrounds.forEach((img) => img.classList.remove("show"));
        backgrounds[op_index].classList.add("show");

        options.forEach((op) => op.classList.remove("colored"));
        options[op_index].classList.add("colored");
      }

      function slide() {
        slider.style.transition = "transform .5s ease-in-out";
        update();
      }

      function btnCheck() {
        if (this.id === "prev") {
          index--;

          if (op_index === 0) {
            op_index = numberOfChildren - 1;
          } else {
            op_index--;
          }
        } else {
          index++;

          if (op_index === numberOfChildren - 1) {
            op_index = 0;
          } else {
            op_index++;
          }
        }
        slide();
      }

      slider.addEventListener("transitionend", () => {
        if (index >= numberOfChildren - 1) {
          return;
        }
        if (index <= 0) {
          return;
        }
        if (slides[index].id === "fist") {
          slider.style.transition = "none";
          index = slides.length - 2;
          slider.style.transform = "translateX(" + -size * index + "px)";
        } else if (slides[index].id === "last") {
          slider.style.transition = "none";
          index = 1;
          slider.style.transform = "translateX(" + -size * index + "px)";
        }
      });

      buttons.forEach((btn) => btn.addEventListener("click", btnCheck));
      options.forEach((option) => option.addEventListener("click", optionFunc));

      setInterval(btnCheck, 5000);
    },
    5000
  );