Parametre fonction .bind()

Bonjour à tous.
Je cherche à ajouter des évènements clic sur une image me permettant de cacher ou dérouler des groupes dans mon interface.
Le soucis est que lorsque j'apelle la fonction $("#showHide_" + i).bind("click", function() {...}, lorsque le clic est executé la valeur de i prise est 4.
Ce qui fait que je me retrouve à ne pouvoir dérouler que le dernier groupe quand je clic sur n'importe quel groupe.

Est-il possible de passer un paramètre a fonction qui serai le i en cours ?

Merci d'avance.
Je met mon code source afin que vous puissiez comprendre.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

for(i = 0; i <= 4; i++) { // Gestion des actions sur l'affichage des groupes $("#showHide_" + i).bind("click", function() { if ($(this).attr("src") == "images/fleche-bas.png") { // Cas où le groupe est replié $(this).attr("src", "images/fleche-haut.png"); // On met les fleches vers le haut } else { $(this).attr("src", "images/fleche-bas.png"); // On met les fleches vers le bas   } $("#tUTD_" + i + "_wrapper").slideToggle( "slow"); }); }

---

Salut,

Il y a plusieurs solution à ce problème:

Tu peux créer une closure différente par passage de boucle
en assignant à bind une fonction qui retourne une fonction interne.

genre:

Code:

---

1 2 3 4 5 6

$("#showHide_" + i).bind( function(v) { return function(event) { ... v est visible ici ... }; }(i); // appel immédiat + copie de i dans v pour chaque passage de boucle );

---

Tu peux ajouter des infos dans l'objet jquery avec .data()

Code:

---

1 2 3 4

$("#showHide_" + i).data('v', i).bind( function(event) { var v = $(this).data('v'); });

---

soit utiliser le paramètre eventData de bind, comme ceci:

Code:

---

1 2 3 4 5 6 7

for(i = 0; i <= 4; i++) { // Gestion des actions sur l'affichage des groupes $("#showHide_" + i).bind("click", { v: i }, function(event) { ... $("#tUTD_" + event.data.v + "_wrapper").slideToggle( "slow"); }); }

---

Ou encore récupérer i de l'attribut id puisqu'il y figure:

Code:

---

1 2 3

$("#showHide_" + i).bind("click", function(event) { var v = $(this).attr('id').split('_')[1]; // Attention type String ici });

---

En faites ce que je fais est la dernière proposition en découpant la chaine mais cela ne me paraissait pas très propre.
Je vais tester les autres solutions.
Merci bien. :ccool:

[Edit]

J'ai finalement opter pour la version 3 qui marche très bien.

Encore merci

Bonsoir

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

/*  * la solution trois est élégante, mais coûteuse  * création de quatre gestionnaires d'événement  */ for(i = 0; i <= 4; i++) { $("#showHide_" + i).bind("click", {v: i}, function(event){ console.log(event.data.v);   // $("#tUTD_" + event.data.v + "_wrapper").slideToggle( "slow"); }); }   /*  * on utilise slice, mais  * un seul gestionnaire d'événement  */ $("[id^='showHide_']").bind("click", function(event){ console.log(event.target.id.slice(9));   // $("#tUTD_" + event.target.id.slice(9) + "_wrapper").slideToggle( "slow"); });

---

[Edit]
:oops: Un moment de faiblesse, il y a toujours quatre gestionnaires d’évènement, voir ci-dessous.

Cette technique évite juste la boucle, mais il y a autant de gestionaires
d'évènement.

Il ne faut pas oublier que le selecteur jquery retourne une
liste.

Dans le premier cas on a une boucle qui fait 4 tours avec
un selecteur qui retourne une liste de 1 élément.

Dans le deuxième cas on a pas de boucle, mais un sélecteur
qui retourne une liste de 4 éléments, bind sera appelé aussi
4 fois.

Il faudrait utiliser live pour n'avoir qu'un seul gestionnaire d'évènement.

:oops: Oui !