Discussion :

[mowegan]

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 :

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

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");
   });
}

[marcha]

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 :

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

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 :

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

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 :

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

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 :

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

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

[mowegan]

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.

[Edit]

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

Encore merci

[danielhagnoul]

Bonsoir

Code :

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

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]
Un moment de faiblesse, il y a toujours quatre gestionnaires d’évènement, voir ci-dessous.

[marcha]

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.

[danielhagnoul]

Oui !