Boucle For dans $(document).ready

Version imprimable

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:

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:

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

23/01/2013, 10h52
Bovino

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

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

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:

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

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:

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:

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

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

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

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

Code:

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

est la forme simplifiée de cela :
Code:

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:

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 ==

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

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.

23/01/2013, 15h45
Kaamo

Avec l'opérateur ternaire :

Code:

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:

$("#img" + id).src = $("#img" + id).attr('src') == 'moins.gif' ? "plus.gif" : "moins.gif";
23/01/2013, 16h28
razorlok

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

Code:

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.
23/01/2013, 16h39
Bovino

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

Code:

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:

$('#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é.
23/01/2013, 16h55
Kaamo

Exact ! Ma faute, je suis allé trop vite en besogne.
23/01/2013, 16h55
razorlok

Merci ! Au moins tout est clair dans ce bout de code. Je vois que j'ai encore beaucoup à apprendre :)
23/01/2013, 17h04
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.