J'ai créé un curseur d'image avec un très grand ensemble d'images dans les balises img. J'essaie de créer un code où, lorsqu'une image dans le curseur est cliquée, elle s'ouvre dans un nouvel onglet / fenêtre. Voici ce que j'ai jusqu'à présent:

var allSlides = document.querySelectorAll('.slide img');

for(i = 0; i < allSlides.length; i++){
    allSlides[i].addEventListener("click", function(){
        window.open(allSlides[i].src);
    })
}

Lorsque je tape allSlides [0] dans la console, j'obtiens un bon résultat (par exemple <img src="123">, mais lorsque je clique sur une image, j'obtiens l'erreur "Uncaught TypeError: Cannot read property 'src' of undefined at HTMLImageElement. { {X1}} ".

Qu'est-ce que je fais mal?

0
user6285791 15 janv. 2017 à 21:50

2 réponses

Meilleure réponse

Le problème que vous avez est à cause de la fermeture. Lorsque vous click l'image, i va avoir la longueur de allSlides, pas le i que vous avez défini dans la boucle. Soit vous devez lier i au gestionnaire de clics, soit mieux encore, utilisez la source de l'élément cliqué comme:

allSlides[i].addEventListener("click", function(event){
  window.open(event.target.src);
});

Vous pouvez également le faire comme:

allSlides.forEach(function(slide) {
  slide.addEventListener("click", function(){
    console.log(slide.src);
  });
});

Créer une portée différente par diapositive, supprimant le besoin de la boucle for.

1
putvande 15 janv. 2017 à 19:02

Merci d'avoir répondu! Je l'ai utilisé, avec une solution légèrement différente, pour obtenir ceci:

var allSlides = document.querySelectorAll('.slide img');

for(i = 0; i < allSlides.length; i++){
    allSlides[i].addEventListener("click", function(){
        window.open(this.src);
    });
}

Ça fonctionne maintenant! Merci beaucoup!

0
user6285791 15 janv. 2017 à 19:32