Discussion :

[razorlok]

Bonjour,

j'essaie de mettre en place une fonction toute simple qui me permette d'utiliser hide et show de jQuery, en cliquant sur "plus" et "moins".

Mon script fonctionne sans boucles, mais dès que je veux remplacer les id de chaque "plus" et "moins" par une variable d'une boucle FOR, c'est là que ça ne fonctionne plus.

Code qui fonctionne :

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
22
23
24
25
function init()
        {
	for (var i=1; i<30; i++)
	{			
    document.getElementById("tohide" + i).style.display="none";
	document.getElementById("moins" + i).style.display="none";						 
   };
   };
 
 $(document).ready(function() { 					
 
   $("#moins1").click(function(){
     $("#tohide1").hide("slide");
	  document.getElementById("moins1").style.display="none";
	  document.getElementById("plus1").style.display="block";
	  return false;
   });
   $("#plus1").click(function(){
     $("#tohide1").show("slide");
	 document.getElementById("plus1").style.display="none";
	 document.getElementById("moins1").style.display="block";
	  return false;
   });
 
  });

Code qui ne fonctionne pas :
Code qui fonctionne :

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
22
23
24
25
26
function init()
        {
	for (var i=1; i<30; i++)
	{			
    document.getElementById("tohide" + i).style.display="none";
	document.getElementById("moins" + i).style.display="none";						 
   };
   };
 
 $(document).ready(function() { 					
        for (var j=1; j<30; j++)
	{	
   $("#moins" + j).click(function(){
     $("#tohide" + j).hide("slide");
	  document.getElementById("moins" + j).style.display="none";
	  document.getElementById("plus" + j).style.display="block";
	  return false;
   });
   $("#plus" + j).click(function(){
     $("#tohide" + j).show("slide");
	 document.getElementById("plus" + j).style.display="none";
	 document.getElementById("moins" + j).style.display="block";
	  return false;
   });
  };
  });

[Bovino]

Un grand classique...
Dans les fonctions de rappel des événements .click(), demande-toi quelle est la valeur de j.

Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

[Kaamo]

Ou sinon se renseigner sur les closures ...
Pourquoi utiliser document.getElementById si tu utilises jQuery ?
Pourquoi ne pas utiliser toogle (qui permet d'afficher / cacher selon l'état) ? Donc un seul bouton dont la valeur change ...
Pourquoi faire une boucle pour cacher à l'initialisation quand un style suffit ?

ps : selon ta boucle, tu as donc 29 div ? Si tu en as 30 (numérotées de 1 à 30 il faut aller jusqu'à j < 31 )

Par exemple (Fiddle) :

Code javascript :

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
function performDisplay(id) {
  $("#tohide" + id).toggle("slide");
  $("#bouton" + id).val(($('#bouton' + id).val() == 'Plus '+id ? 'Moins ' : 'Plus ') + id);
}
 
function makeDisplayCallback(id) {
  return function() {
    performDisplay(id);
  };
}
 
$(document).ready(function() { 
  for (var i=1; i<30; i++) {	
    $("#bouton" + i).click(makeDisplayCallback(i));
  }
});

[razorlok]

Merci à vous deux pour les réponses. J'ai compris la logique de l'utilisation d'un indice.
Le morceau de code fonctionne très bien. J'avais pensé au toggle au début, mais je ne voyais pas comment faire passer mon image "+" en "-".

J'ai finalement utilisé :

Code :

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

1
2
3
4
5
6
7
8
function performDisplay(id) {
  $("#tohide" + id).toggle("slide");
  if ($("#img" + id).attr('src') === 'moins.gif') {
        document.getElementById("img" + id).src="plus.gif";
    } else {
        document.getElementById("img" + id).src="moins.gif";
    }
}

Par contre, Kaamo je ne comprends pas la ligne suivante de ton code :

Code :

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

$("#bouton" + id).val(($('#bouton' + id).val() == 'Plus '+id ? 'Moins ' : 'Plus ') + id);

Je n'ai pas assez d'expérience en javascript.

[Kaamo]

Il s'agit de l'opérateur "ternaire". Qui permet d'écrire de façon courte un bloc conditionnel if ... else

Code :

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

1
2
(expr1) ? expr2 : expr3
=> Si expr1 est vraie, alors expr2 sinon expr3

Ceci :

Code javascript :

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

$("#bouton" + id).val(($('#bouton' + id).val() == 'Plus '+id ? 'Moins ' : 'Plus ') + id);

est la forme simplifiée de cela :

Code javascript :

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

1
2
3
4
5
6
// Si mon bouton vaut 'Plus X' ...
if ($('#bouton' + id).val() == 'Plus ' + id) {
  $("#bouton" + id).val('Moins ' + id); // ... alors je l'appelle 'Moins X'
} else {
  $("#bouton" + id).val('Plus ' + id); // ... sinon 'Plus X'
}

Donc, ton nouveau code :

Code :

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

1
2
3
4
5
if ($("#img" + id).attr('src') === 'moins.gif') {
  document.getElementById("img" + id).src="plus.gif";
} else {
  document.getElementById("img" + id).src="moins.gif";
}

Peut s'adapter en ?

ps : d'ailleurs, === à corriger en ==

[razorlok]

D'accord, je comprends mieux !
Ca fonctionne parfaitement maintenant :

Code :

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

1
2
3
4
5
if ($("#img" + id).attr('src') == 'moins.gif') {
  document.getElementById("img" + id).src="plus.gif";
} else {
  document.getElementById("img" + id).src="moins.gif";
}

En tout cas merci encore, également pour les explications.