Se connecter / S'enregistrer
Votre question

[JS] addEvent avec mootools [Résolu]

Tags :
  • Direct
  • Programmation
Dernière réponse : dans Programmation
10 Août 2008 18:53:06

Bonjour,

J'utilise mootools et je souhaite actualiser des informations en direct.

Pour cela j'utilise ce code :

  1. window.addEvent('domready', function(){
  2. var i=0;
  3. var message = '';
  4.  
  5. for(i=1;i<10;i++)
  6. {
  7. if($('evolution'+i))
  8. {
  9. $('evolution'+i).addEvent('mouseover', function(e) {
  10.  
  11. message = $('detailEvolution'+i).value;
  12. $('test').innerHTML = message;
  13. });
  14. }
  15. }
  16. });


L'objectif est assez simple, je veux que lorsque je passe mon curseur sur un titre, il affiche le titre ailleurs dans <span id="test"></span>. Les différents titres ont pour id evolution1, evolution2, etc...

Le problème ici, c'est que lorsque je pointe sur un titre, il m'affiche toujours le titre de evolution9, même si je pointe mon curseur sur evolution2. J'aimerais donc savoir comment je peux faire.

Je vous remercie par avance ;) 

Ragnarok-sg-c

Autres pages sur : addevent mootools resolu

10 Août 2008 22:28:20

Bonsoir,

J'ai réussi à obtenir une solution, je vous en fait donc part :


Citation :

Salut,

C'est un problème assez classique dû au partage des variables d'une même fermeture.

Toutes les fonctions anonymes que tu crée avec

  1. function(e) {
  2. message = $('detailEvolution'+i).value;
  3. $('test').innerHTML = message;
  4. }

se partage la même variable i. Or à la fin de la boucle, cette variable i vaut 10.

Il faut donc créer une variable séparée pour chaque fonction et pour cela il faut passer par l'appel à une fonction intermédiaire qui se chargera d'assigner l'évènement 'mouseover' pour une valeur de i donnée en paramètre. L'astuce, c'est que le passage des paramètres se fait par valeur (et non pas par référence).

Voilà donc cette fonction d'assignement:

  1. function assigner(i)
  2. {
  3. if($('evolution'+i))
  4. {
  5. $('evolution'+i).addEvent('mouseover', function(e) {
  6. message = $('detailEvolution'+i).value;
  7. $('test').innerHTML = message;
  8. });
  9. }
  10. }


Et à l'intérieur de la boucle for, il y a juste à appeler cette fonction:

  1. for(i=1;i<10;i++)
  2. {
  3. assigner(i);
  4. }




Bonne soirée

Ragnarok-sg-c
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS