Первый щелчок на лайтбокс работает, но не из других галерей

Question

Я создал функциональность лайтбокса в JavaScript, и теперь я работаю над тем, чтобы реализация выполнялась при наличии нескольких галерей на той же странице, что я не принимал при его разработке.

Для достижения желаемого эффекта, я использую набор данные и данные - * - атрибуты экстенсивно (data-index индексировать, data-total хранить сколько изображения в .gallery и data-current для хранения .gallery, которые должны быть отображены в #lightbox . .gallery с пиктограммой <img> s завернуты в <figure><a> с href атрибута, тем больше #lightbox img.

Эти атрибуты работают теоретически, и возвращать правильные значения с сопровождающими код. После загрузки страницы, при нажатии на одну из галерей, галерея работает, как ожидалось, bein g, изолированный от других, зацикливая изображения галереи.

Проблема возникает при закрытии лайтбокса и нажатии на одну из других галерей. В IE 11 я получаю ошибку Unable to get value of... в инструментах разработчика на последней строке document.querySelector. Однако при выводе возвращаемых значений в console.log() я не могу понять, почему он не добавляет класс .current, который используется для отображения, потому что когда значения верны и выглядят как допустимый селектор (и он по-прежнему работает в первом щелкнике .gallery):

Это сильно сокращенный вариант кода JS. Переменные и селекторы также были переведены на английский язык, чтобы люди здесь могли лучше понять это. Внимательно посмотрите на переменные galleryindex, galleryindexarray, thisgallery, thisgallerya и current, в которых лежит функциональность вокруг проблемы.

var lightbox = document.createElement('div'), 
    gallerya = document.querySelectorAll(".gallery a"), 
    current, img, i, galleryindexarr = []; 
for (i = 0; i < gallerya.length; i++) { 
    gallerya[i].addEventListener("click", function(e) { 
     e.preventDefault(); 
     var galleryindex = this.parentNode.parentNode.dataset.index, 
      thisgallery = document.querySelector(".gallery[data-index='" + galleryindex + "']"), 
      thisgallerya = document.querySelectorAll(".gallery[data-index='" + galleryindex + "'] a"); 
     if(!document.getElementById("lightbox")) { 
      lightbox.id = "lightbox"; 
      document.body.insertBefore(lightbox, document.body.firstChild); 
     } 
     if(galleryindexarr.indexOf(galleryindex) == -1) { 
      galleryindexarr.push(galleryindex); 
      for (i = 0; i < thisgallerya.length; i++) { 
       img = document.createElement("img"); 
       img.src = thisgallerya[i].href; 
       img.dataset.index = galleryindex; 
       lightbox.appendChild(img); 
      } 
     } 
     current = [].indexOf.call(thisgallery.childNodes, this.parentNode); 
     document.querySelector("#lightbox img[data-index='" + galleryindex + "']:nth-of-type(" + current + ")").classList.add("current"); 
    }); 
} 

Адрес test demo site with further visual clarification. Пожалуйста, помогите мне в этой довольно небольшой ошибке, если вы знаете все, что может помочь.

Answer 1

После почти двух часов тестирования мне удалось обнаружить проблему. В селекторе возникла проблема, поскольку @mplungjan упоминается в комментариях, поэтому, работая в вашем full code, попробуйте заменить селектор в следующей строке (после двух строк журнала консолей) правильным селектором.

Заменить:

document.querySelector("#lysboks img[data-galleriindeks='" + galleriindeks + "'] 
:nth-of-type(" + gjeldende + ")").classList.add("current"); 

By:

document.querySelectorAll("#lysboks img[data-galleriindeks='" + galleriindeks + "']").item(gjeldende-1).classList.add("current"); 

Теперь вы должны быть в состоянии увидеть фотографии, но следующие и предыдущие картины еще не работают.

Чтобы исправить навигацию (следующие & предыдущих), вы должны заменить строку ниже в своей функции gå(), чтобы получить правильный селектор.

Заменить:

document.querySelector("#lysboks img[data-galleriindeks='" + document.querySelector 
(".galleri[data-gjeldende]").dataset.indeks + "']:nth-of-type(" + destinasjon + ")"). 
classList.add("current"); 

By:

document.querySelectorAll("#lysboks img[data-galleriindeks='" + document.querySelector(".galleri[data-gjeldende]").dataset.indeks + "']").item(destinasjon-1).classList.add("current"); 

И теперь он должен работать нормально (проверено в Google Chrome). Надеюсь, это помогло исправить вашу проблему. Удачи и приятные выходные.