JavaScript: множественные постоянные переменные индекса

Nikita Portnoy спросил: 03 февраля 2018 в 01:03 в: javascript

Я новичок в программировании и столкнулся с проблемой создания фотогалереи с помощью JS.

Итак, миниатюры вызывают модальное изображение с соответствующим изображением, которое передается через index как параметр. Я использовал немного 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);
    });  };});

0 ответов