Discussion :

[Seds994]

Bonjour, j'ai un petit problème avec la boucle suivante:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var geeks = document.querySelectorAll(".geek img");
for (var i = 0; i < geeks.length; i++){
  geeks[i].addEventListener('mouseover', function(){  // changer la scr de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
  geeks[i].addEventListener('mouseout', function(){  // rétablir la source de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
}

cela semble fonctionner pour ce qui concerne la balise img, mais la source me donne une image qui n'existe pas à savoir "geek-7.png", alors que les images vont de geek-0.png à geek-6.png. logiquement cette boucle devrait m'envoyer la même valeur de i que la balise img non?

je ne comprends pas comment faire. quelqu'un aurait-il une soluce pour une débutante comme moi?

merci et bonne année!!!!

[headmax]

Salut et Bonne Année a toi aussi, pour la boucle soit tu initialise a 1 au lieu de 0 ce que je te conseil pas ou soit tu opte 1 a chaque itération a la somme des images soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var geeks = document.querySelectorAll(".geek img");
for (var i = 0; i < (geeks.length-1); i++){
  geeks[i].addEventListener('mouseover', function(){  // changer la scr de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_red/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
  geeks[i].addEventListener('mouseout', function(){  // rétablir la source de l'image
    var source = this.setAttribute('src', 'img/geek-animation/geek_white/geek-' + i + '.png');
    document.querySelectorAll('.geek img')[i] = source;
  });
}

A tester bien sur.

[NoSmoking]

Bonjour,
l'explication est lié au scope, question que vaut la variable i au moment de l’exécution des fonctions ?

Réponse dans la Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?.

La réponse « moderne », avec l’avènement de l'ES6, est de remplacer ton var i par let i ton problème de scope sera résolu, voir let sur MDN.

[Seds994]

merci c'était bien ça: let !
je pensais que c'était réservé à jquery bêtement..
je vais lire attentivement cet article

merci encore!!!

[Beginner.]

Salut,

Ah NoSmoking m'a devancé, je voulais tester avant de répondre... Merci à lui notamment pour la faq...

Bon je poste quand même une simplification de votre code :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var geeks = document.querySelectorAll(".geek img");
 
for (let i = 0; i < geeks.length; i++) {
 
    geeks[i].addEventListener('mouseover', function () { // changer la scr de l'image           
        this.src = 'img/geek-animation/geek_red/geek-' + i + '.png';
    });
    geeks[i].addEventListener('mouseout', function () { // rétablir la source de l'image
        this.src = 'img/geek-animation/geek_white/geek-' + i + '.png';
    });
}

C'est moins lourd et plus rapide je pense que d'utiliser à chaque fois querySelectorAll(".geek img"), setAttribute et la variable "source"....

[Seds994]

oui merci beginner.!