Problème de closure ?

Problème de closure ? - HTML/CSS - Programmation

Marsh Posté le 20-07-2007 à 12:05:56    

Bonjour à tous. J'ai un petit problème de Javascript et je suppose que cela a à voir avec les closures (j'ai lu quelques trucs dessus, mais j'avoue ne pas avoir tout compris).
J'ai une liste de lien comme ça:

Code :
  1. <ul><li>
  2.       <h3>general</h3>
  3.       <ul id="general">
  4.         <li><a href="http://developer.mozilla.org/fr/docs/accueil">mdc - accueil</a></li>
  5.         <li><a href="http://developer.mozilla.org/">mdc - main page</a></li>
  6.         <li><a href="http://www.alsacreations.com/articles/">alsacréations</a></li>
  7.         <li><a href="http://www.devguru.com/home.asp">devguru home</a></li>
  8.         <li><a href="http://openweb.eu.org/xhtml/">openweb.eu.org - le xhtml</a></li>
  9.         <li><a href="http://www.thinkvitamin.com/">vitamin - a resource for web developers, designers and entrepreneurs</a></li>
  10.         <li><a href="http://www.w3schools.com/">w3schools</a></li>
  11.       </ul>
  12.     </li>
  13.     <li>
  14.       <h3>css</h3>
  15.       <ul id="css">
  16.         <li><a href="http://colormixers.com/mixers/cmr/">colormixers</a></li>
  17.         <li><a href="http://www.ilovejackdaniels.com/css/">css - ilovejackdaniels.com</a></li>
  18.         <li><a href="http://www.satzansatz.de/cssd/onhavinglayout.html">on having layout - the concept of haslayout in ie/win</a></li>
  19.         <li><a href="http://pompage.net/pompe/csspratique/">pompage - techniques et astuces pratiques pour une mise en page css</a></li>
  20.         <li><a href="http://typetester.maratz.com/">typetester - compare fonts for the screen</a></li>
  21.         <li>
  22.           <h4>lists</h4>
  23.           <ul id="list">
  24.             <li><a href="http://css.maxdesign.com.au/listamatic/">listamatic</a></li>
  25.             <li><a href="http://developer.mozilla.org/fr/docs/indentation_homog%c3%a8ne_des_listes">mdc - indentation homogène des listes</a></li>
  26.           </ul>
  27.         </li>
  28.       </ul>
  29.     </li>
  30. </ul>


Le but est de pouvoir les plier/déplier en cliquant sur le titre de la rubrique (h3 ou h4)
j'ai donc la portion de code suivante :

Code :
  1. function folderize() {
  2.     var els = new Array('h3', 'h4');
  3.     for (var i=0, len=els.length; i<len; i++) {
  4.       var elm = document.getElementsByTagName(els[i]);
  5.       for (var j=0, lengh=elm.length; j<lengh; j++) {
  6.         var n = elm[j].innerHTML;
  7.         elm[j].addEventListener('click', function() {
  8.           alert(n);
  9.         }, false);
  10.       }
  11.     }   
  12.   }
  13.   window.onload = folderize;


Pour l'instant, j'aimerais afficher le nom de la rubrique en cliquant dessus. Seulement, à chaque fois, c'est le nom de la toute dernière rubrique qui s'affiche.
Quelqu'un pourrait il me donner des explications ?
Merci d'avance

Message cité 1 fois
Message édité par Pato el canardo le 20-07-2007 à 12:06:36
Reply

Marsh Posté le 20-07-2007 à 12:05:56   

Reply

Marsh Posté le 20-07-2007 à 12:18:59    

Pato el canardo a écrit :

Quelqu'un pourrait il me donner des explications ?


 
Oui. Dans ta closure tu fais référence à "n" ; or n change à chaque passage de ta boucle : à la fin, il contient le dernier innerHtml. Toutes tes closures font référence au même "n", donc à chaque fois que tu cliques ça affiche la dernière rubrique.
 
Personnellement j'utiliserais plutôt quelque chose dans le genre (attention c'est juste un exemple, y'a des hacks à faire pour récupérer le target d'un evenement correctement avecIE) :
 

Code :
  1. elm[j].addEventListener('click', function(e) {
  2. alert(e.target.innerHTML);
  3. }, false);


---------------
When it's from Finland it's good.  - Mon blog
Reply

Marsh Posté le 20-07-2007 à 13:02:03    

moi j'utiliserais this, ce qui fonctionnerait avec ie et ff :o

Code :
  1. elm[j].addEventListener('click', function(e) {
  2.     alert(this.innerHTML);
  3.     }, false);

Reply

Marsh Posté le 20-07-2007 à 13:06:53    

merci beaucoup à tous les deux :jap:

Reply

Marsh Posté le 20-07-2007 à 13:38:38    

je reviens à la charge, car cela ne fonctionne pas sous IE :(
voilà le code actuel:

Code :
  1. function folderize() {
  2.     var els = new Array('h3', 'h4');
  3.     for (var i=0, len=els.length; i<len; i++) {
  4.       var elm = document.getElementsByTagName(els[i]);
  5.       for (var j=0, lengh=elm.length; j<lengh; j++) {
  6.         elm[j].style.cursor = 'pointer';
  7.         if (elm[j].addEventListener){
  8.           elm[j].addEventListener('click', function(e) {
  9.             alert(this.innerHTML);
  10.           },
  11.           false);
  12.         } else if (elm[j].attachEvent) {
  13.           elm[j].attachEvent('onclick', function(e) {
  14.             alert(this.innerHTML);
  15.           });
  16.         }
  17.       }
  18.     }   
  19.   }


FF me retourne bien le nom de la rubrique, mais IE me retourne 'undefined' ...

Reply

Marsh Posté le 20-07-2007 à 13:47:55    

tu as d'autres handlers sur ton event click pour tes elms?
Si c'est pas le cas, tu peux simplifier tout ça en faisant:

Code :
  1. for (var j=0, lengh=elm.length; j<lengh; j++) {
  2.        elm[j].style.cursor = 'pointer';
  3.        elm[j].onclick = function (){
  4.          alert(this.innerHTML);
  5.        }
  6. }


Qui marchera sous IE et FF.


Message édité par anapajari le 20-07-2007 à 13:48:12
Reply

Marsh Posté le 20-07-2007 à 13:51:24    

Merci :jap:
cela fonctionne sous les deux navigateurs.
Sais tu pourquoi mon code précédent ne fonctionnait pas ?

Reply

Marsh Posté le 20-07-2007 à 13:58:58    

A cause de c'est qu'expliquait cgo2 :)
attachEvent fonctionne bizarrement, du coup le this ne represente pas l'objet sur lequel l'evenement a eu lieu. Il faut le récupérer via event.srcElement.
Donc ça pouvais pas marcher à cause de this ( et donc oui ma 1ere réponse était pas terrible :o )

Reply

Marsh Posté le 20-07-2007 à 14:48:39    

:)
ok, je ne suis pas certain d'avoir plus compris qu'auparavant. En tous cas, merci pour l'explication :jap:

Reply

Marsh Posté le 21-07-2007 à 12:29:31    

anapajari a écrit :

A cause de c'est qu'expliquait cgo2 :)
attachEvent fonctionne bizarrement, du coup le this ne represente pas l'objet sur lequel l'evenement a eu lieu. Il faut le récupérer via event.srcElement.
Donc ça pouvais pas marcher à cause de this ( et donc oui ma 1ere réponse était pas terrible :o )


Tu es mauvais, tu es mauvais hein, ne change rien :o.

 

Ca te dirais de faire du HTML/CSS/JS dans une team de warriors ? [:cupra]


Message édité par gatsu35 le 21-07-2007 à 12:29:39
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed