Discussion :

[vaneck]

Bonjour, je crée un slideshow, avec une grosse image en haut et des miniatures en bas. L'image du haut se déplace en fonction de la vignette que j'ai choisie en bas.
illustration:

Code :

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

1
2
3
4
5
6
var elementimg = document.querySelectorAll('#navigation li'); /* Je sélectionne toute les balises li */
for (var i = 0, c = elementimg.length; i < c; i++) {
elementimg[i].addEventListener('click', function() {
document.querySelector('section nav ul').style.marginLeft= "-"+ i*940+"px"; /* Je décale "ul" sur la gauche en fonction de la place de la balise li*940 pixels. ex: je clique sur la troisieme balise li, la balise ul se déplace de 2820 pixels sur la gauche */
}, false);		
}

Le problème de cette fonction, c'est qu'au final quelque soit le <li> sur le quel je cliquerais, seul la plus grande valeur de "i" sera retenue, c'est à dire la dernière valeur de "i" dans sa boucle. <ul> se déplacera toujours du même nombre de pixels sur la gauche.
Il faut donc que la variable "i" garde ses différentes valeurs dans chacune des fonctions associé eux événements sur mes différent <li>.
J'ai crus comprendre que les closures servaient précisément dans ce cas précis.
Pouvez vous me le confirmer?
merci

[sekaijin]

il faut utiliser une closure pour construire la fonction annonyme

Code :

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

1
2
3
4
5
6
7
8
9
var elementimg = document.querySelectorAll('#navigation li'); /* Je sélectionne toute les balises li */
for (var i = 0, c = elementimg.length; i < c; i++) {
  elementimg[i].addEventListener('click', (function(offset) {
    return function() {
      document.querySelector('section nav ul').style.marginLeft= offset; 
    }
  })("-"+ i*940+"px"), 
  false);		
}

AJYT

[vaneck]

merci pour ton aide, (ca marche).
Donc si j'ai bien compris le principe, on peux schématiser les closures ainsi:

Code :

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

1
2
3
4
5
(function(/* parametre1*/) {
    return function()/* permet de créer une fonction anonyme */  {
      /* construction de la fonction, qui prendra les valeur de parametre 1*/
    }
  })(/*valeur du parametre1 */)

Donc a chaque tour de boucle , je garde la valeur de la variable i du tour en cours, pour créer une nouvelle fonction avec cette valeur.
Je voudrais maintenant pouvoir lire le contenue de la balise cliquée:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var elementimg = document.querySelectorAll('#navigation li');
for (var i = 0, c = elementimg.length; i < c; i++) {
  elementimg[i].addEventListener('click', (function(offset,test) {
 
    return function() {
      document.querySelector('section nav ul').style.marginLeft= offset;
alert(test.innerHTML);
 
    }
  })("-"+ i*940+"px",this), 
  false);
 
}

étrangement, le pop up ne me revoit rien.