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.

[Kaamo]

Avec l'opérateur ternaire :

Code :

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

document.getElementById("img" + id).src = $("#img" + id).attr('src') == 'moins.gif' ? "plus.gif" : "moins.gif";

et pourquoi ne pas utiliser jQuery jusqu'au bout ??

Code :

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

$("#img" + id).src = $("#img" + id).attr('src') == 'moins.gif' ? "plus.gif" : "moins.gif";

[razorlok]

Je viens d'essayer avec ce code et ça fonctionne très bien :

Code :

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

document.getElementById("img" + id).src = $("#img" + id).attr('src') == 'moins.gif' ? "plus.gif" : "moins.gif";

Par contre avec $("#img" + id).src ça ne me change plus les images, je n'ai que le plus.gif de ma balise <img src="images/plus.gif" id="img1" />.
J'avoue que je ne me l'explique pas, mais en tout cas, l'autre fonctionne.

[Bovino]

C'est la différence essentielle entre jQuery et le JavaScript natif :

Code :

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

document.getElementById('element');

renvoie un objet de type HTMLElement qui possède certaines propriétés en fonction de la balise, dont src pour une balise <img />.
Alors que

Code :

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

$('#element')

renvoie un objet jQuery dont les propriétés sont celles définies par jQuery et non celles natives des éléments. Pour modifier les propriétés DOM, il faut donc passer par .prop() ou .attr().

Bref, selon moi, l'utilisation de jQuery dans ton exemple n'est pas du tout justifié.

[Kaamo]

Exact ! Ma faute, je suis allé trop vite en besogne.

[razorlok]

Merci ! Au moins tout est clair dans ce bout de code. Je vois que j'ai encore beaucoup à apprendre

[Bovino]

@Kaamo : non, dans l'absolu, tu as raison ! Si on utilise jQuery, autant le faire de façon globale et cohérente.
Mais dans l'exemple donné, je ne vois pas l'utilité de jQuery...
Ensuite, dans tous les cas, il faut bien se rendre compte que jQuery est bien pratique, mais ça met en oeuvre toute une mécanique pour des opérations souvent simples, donc le résultat peut être 10 fois plus lent avec que sans, même si souvent, ce n'est pas réellement perceptible.