Premier clic sur la visionneuse fonctionne, mais pas d'autres galeries

Question

J'ai construit une fonctionnalité lightbox en JavaScript, et je travaille maintenant pour que l'implémentation fonctionne en ayant plusieurs galeries sur la même page, une fonctionnalité que je n'ai pas prise en compte lors de son développement.

Pour obtenir l'effet désiré, j'utilise ensemble de données et les données - * - attributs largement (data-index à l'index, data-total pour stocker le nombre d'images dans la .gallery et data-current pour stocker .gallery qui doit être affiché dans le #lightbox . le .gallery avec vignette <img> s sont enveloppées dans <figure><a> avec un attribut href au plus #lightbox img.

Ces attributs fonctionnent théoriquement, et renvoient les valeurs correctes avec le code d'accompagnement. une fois le chargement de la page, en cliquant sur l'une des galeries, la galerie fonctionne comme prévu, bein g isolé des autres, en boucle à travers les images de la galerie.

Le problème survient lors de la fermeture de la visionneuse, et en cliquant sur l'une des autres galeries. Dans IE 11, j'obtiens une erreur Unable to get value of... dans les outils de développement sur la dernière ligne document.querySelector. Lors de la sortie des valeurs renvoyées à console.log(), cependant, je ne comprends pas pourquoi il n'ajoute pas la classe .current utilisée pour afficher le, car lorsque les valeurs sont correctes et ressemble à un sélecteur valide (et cela fonctionne toujours dans le premier-cliqué) .gallery):

Ceci est une version très raccourcie du code JS. Les variables et les sélecteurs ont également été traduits en anglais afin que les gens d'ici puissent mieux le comprendre. Jetez un bon coup d'oeil aux variables galleryindex, galleryindexarray, thisgallery, thisgallerya et current, où se trouve la fonctionnalité autour du problème.

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"); 
    }); 
} 

Voici une test demo site with further visual clarification. Aidez-moi s'il vous plaît sur cette erreur plutôt petite si vous savez n'importe quoi qui pourrait aider.

Answer 1

Après presque deux heures de test, j'ai détecté le problème. Il y avait un problème dans le sélecteur comme @mplungjan mentionné dans les commentaires, donc en travaillant dans votre full code, essayez de remplacer le sélecteur dans la ligne suivante (après les lignes de consoles des deux consoles) par le sélecteur correct.

Remplacer:

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

Par:

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

Maintenant, vous devriez être en mesure de voir les images, mais les images suivantes et précédentes ne fonctionnent pas encore.

Pour corriger les boutons de navigation (suivant & précédent), vous devez remplacer la ligne ci-dessous dans votre fonction gå() pour obtenir le bon sélecteur.

Remplacer:

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

Par:

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

Et maintenant, il devrait fonctionner correctement (testé dans Google Chrome). J'espère que cela a aidé à résoudre votre problème. Bonne chance et bonne fin de semaine.