JavaScript：多个持久索引变量

Question

我是编程世界的新手，在使用JS制作照片库方面遇到了一些麻烦。

因此，缩略图调用具有适当图像的模态，该图像通过索引作为参数传递。我使用了一些JQuery只是为了在没有循环的情况下在所有缩略图上附加处理程序。

第一个Modal初始化工作正常，我能够在图像之间切换，然后关闭模态就好了。之后，如果我重新初始化模态，第一个图像显示正确，但使用“下一个”和“上一个”按钮时，另一个图像出现在模态中。经过仔细检查（以及一堆变量日志）后，我确定旧的索引（来自第一个模态初始化）在程序中持续存在，因此该函数正在运行上一个索引并且新的索引传递给它。关闭它的次数越多，您拥有的索引变量就越多。几乎看起来该函数正在运行自身的多个副本，并将所有这些图像附加到该模态上。

对不起，如果这是一个非常明显的错误。我不是真的在这个论坛上发帖但是试着自己解决它，但是在6小时和50个Chrome标签之后，我就差不多了。非常感谢！这是我的代码：

https://jsfiddle.net/5yejqw8a/4/#&togetherjs=M77M8B8LU8

    $(document).ready(function(){

  $('.GalleryImg').on('click', function() { //Attach event handler on each photo
    var GalleryImgs = Array.prototype.slice.call(document.getElementsByClassName('GalleryImg')); //Turns object array to an a proper array
    var ImgIndex = GalleryImgs.indexOf(this); //Position of img clicked
    OpenModal(ImgIndex); //Passes the index into the modal function
  });

  function OpenModal(n) { //Modal function with index parameter
    var SlideIndex = n;
    console.log("Start Index = "+SlideIndex);
    var Lightbox = document.getElementById("Lightbox");
    var Modal = document.getElementById("ModalContent");
    var Slides = document.getElementsByClassName("ModalSlides");

    Lightbox.style.display = "block";
    Slides[SlideIndex].style.display = "block";

    var PreviousBtn = document.getElementById("PreviousBtn");
    PreviousBtn.addEventListener('click', function() {
      if (SlideIndex > 0) {
        Slides[SlideIndex].style.display = "none";
        SlideIndex --;
        Slides[SlideIndex].style.display = "block";
        console.log("PCurrent = "+SlideIndex);
      } else {
        return;
      };
    });

    var NextBtn = document.getElementById("NextBtn");
    NextBtn.addEventListener('click', function() {
      if (SlideIndex < Slides.length-1) {
        console.log(SlideIndex);
        Slides[SlideIndex].style.display = "none";
        SlideIndex ++;
        Slides[SlideIndex].style.display = "block";
        console.log("NCurrent = "+SlideIndex);
      } else {
        return;
      };
    });

    var CloseBtn = document.getElementById("CloseBtn");
    CloseBtn.addEventListener('click', function() {
      Lightbox.style.display = "none";
      var i = 0;
      while (i < Slides.length) {
        Slides[i].style.display = "none";
        i++
      };
      console.log("Closing Index = "+SlideIndex);
    });

  };

});

Answer 1

另一答案