toggle dans un ajout dynamique

Version imprimable

Bonjour,

Je suis à la recherche d'aide sur le code suivant. Tout d'abord la situation qui fonctionne, j'ajoute ce code html et javascript dynamiquement :

html :

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
<div id="char">
   <div id="G1" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G1_content" class="skills" >
   	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G2" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G2_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G3" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G3_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
   <div id="G4" name="charGroup" class="skills" ><div class="text">blabla</div></div>
   <div id="G4_content" class="skills" >
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book1-4"><div class="level4"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
	<li><div class="book5"><div class="level5"></div><div class="text">bla bla</div><div class="text">glurp glurp</div></div></li>
   </div>
</div>

javascript associé :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#G1").toggle(function () { $("#G1_content").show(); return false; },
                function () { $("#G1_content").hide();  return false; });
$("#G1_content").hide();
$("#G2").toggle(function () { $("#G2_content").show(); return false; },
                function () { $("#G2_content").hide();  return false; });
$("#G2_content").hide();
$("#G3").toggle(function () { $("#G3_content").show(); return false; },
                function () { $("#G3_content").hide();  return false; });
$("#G3_content").hide();
$("#G4").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G4_content").hide();
$('#char').load('a.html', function() {});

tout se passe bien, mais si je le fais avec une boucle for :

Code:

1
2
3
4
5
6
7
8
9
var allElements = document.getElementsByName("charGroup");
for (var i=0; i < allElements.length; i++) {
   var el ="#"+allElements[i].id;
   var elc ="#"+allElements[i].id+"_content";
   $(el).toggle(function () { $(elc).show(); return false; },
                    function () { $(elc).hide();  return false; });
   $(elc).hide();
}
$('#char').load('a.html', function() {});

J'obtiens un comportement equivalent à ce code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$("#G1").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G1_content").hide();
$("#G2").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G2_content").hide();
$("#G3").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G3_content").hide();
$("#G4").toggle(function () { $("#G4_content").show(); return false; },
                function () { $("#G4_content").hide();  return false; });
$("#G4_content").hide();

Toutes mes entêtes toggle le dernier content (dans le cas présent G4_content)...

Au secour! :cry:

Il y a différentes choses qui ne vont pas :
* Ta boucle commence à 0 alors que tes div commencent à 1 ;
* L'attribut name n'existe normalement pas pour une div ;
* Dans le code :
Code:

1 2 var el ="#"+allElements[i].id; var elc ="#"+allElements[i].id+"_content";
C'est inutile et potentiellement dérangeant pour jQuery... Tu pointes déjà sur un élément, donc
Code:

1 2 3 4 5 6 for (var i=0; i < allElements.length; i++) { var elc ="#"+allElements[i].id+"_content"; $(allElements[i]).toggle(function () { $(elc).show(); return false; }, function () { $(elc).hide(); return false; }); $(elc).hide(); }
Devrait suffire...

Salut,
Code:

1 2 3 4 5 6 7 8 for (var i=0; i < allElements.length; i++) { var el ="#"+allElements[i].id; var elc ="#"+allElements[i].id+"_content"; $(el).toggle(function () { $(elc).show(); return false; }, function () { $(elc).hide(); return false; }); $(elc).hide(); }
Dans ce code tu déclares deux fonctions qui seront appelées plus tard dans
le temps. Ces fonctions ont accès à la variable elc dans l'état où elle est au
moment de l'exécution des fonctions, c'est à dire la valeur associée au
dernier passage de boucle.

Dans ton premier code tu as autant de fonction que tu as de valeurs pour elc.

Tu peux reproduire la même chose en créant autant de fonction ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 for (var i=0; i < allElements.length; i++) { var el ="#"+allElements[i].id; var elc ="#"+allElements[i].id+"_content"; $(el).toggle( function(v) { return function () { $(v).show(); return false; } }(elc), function(v) { return function () { $(v).hide(); return false; } }(elc) ); $(elc).hide(); }
Ici on crée une fonction à chaque fois à l'aide d'une autre fonction qui
reçoit un paramètre "v" et qui est directement appelée (grâce à (elc) à la fin)

C'est la fonction interne qui est associée à l'évenement mais celle-ci conserve
un accès à "v" par une closure qui lui est propre.

03/02/2009, 09h46
marcha
Avec un peu de recul il me semble que tu pourrais faire plus simple.

Etant donné que les ID de tes div sont en relation (nomenclature) avec
les contenus.

tu pourrais faire une class skills_group et écrire un code JQuery du genre
Code:

1 2 3 4 5 $(".skills_group").toggle( function () { $('#' + $(this).attr('id') + '_content').show(); return false; }, function () { $('#' + $(this).attr('id') + '_content').hide(); return false; } );

Merci pour vos réponse rapide.

Je me doutais bien d'un truc comme ça marcha, mais étant autodidacte et un petit peu newbie sur le sujet, j'avais pas trouvé la solution seul.

avec ton code ça fonctionne par contre avec une petite modif pour létat de départ de skills
Code:

1 2 3 4 5 6 $(".skills_group").toggle( function () { $('#' + $(this).attr('id') + '_content').show(); return false; }, function () { $('#' + $(this).attr('id') + '_content').hide(); return false; } ); $(".skills").hide();
Merci encore.