Discussion :

[BobRazowsky]

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 :

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

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

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 :

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

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 :

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

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!

[Bovino]

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 :

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

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 :

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

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

[marcha]

Salut,

Code :

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

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 :

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

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.

[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 :

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

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

[BobRazowsky]

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 :

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

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.