Discussion :

[isa28]

J'ai deux division dans une division global. Chacune de ces divisions sera en float:left dans le CSS.

Dans champsGenere, le menu sera généré par une boucle qui passe les entrées d'un tableau. Jusqu'ici, aucun problème!

Sauf que lorsque je clique sur un cours, j'aimerais que les détails de ce cours apparaisse dans la seconde division (soit coursGenere). Lorsque je choisi un autre cours, les détails changent (ces détails sont aussi généré par ce tableau).

J'arrive à le faire si les détails apparaissent sous le champ du cours plutôt que dans l'autre division.

Peut-être que j'arrive pas à trouver le bon parentNode, nextSibling ou je sais pas trop. Peut-être que ça se fait pas?

Est-ce que quelqu'un sait comment faire?

Merci beaucoup!!!

HTML:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="global">
 
    <div id="champsGenere">            
    	<p>Ateliers d'informatique</p>
    </div> 
 
    <div id="coursGenere">            
        <p>Titre du champ d'application</p>
    </div> 
 
</div>

JAVASCRIPT

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
27
28
29
30
31
32
33
34
35
36
37
38
39
var derniereListeCours = null;
 
function afficheChamps() 
{
	for(i=0; i<champApplications.length; i++)
	{
		var divNomChamp = document.createElement("div");
		divNomChamp.appendChild(document.createTextNode(champApplications[i][0]));
		divNomChamp.className = "divNomChamp";
		document.getElementById("champsGenere").appendChild(divNomChamp);	
 
		divNomChamp.onclick = basculeCours;	
 
		for(j=0; j<champApplications[i][1].length; j++)
		{	
			var divGlobal = document.createElement("div");
			divGlobal.className = "coursPlace";
			document.getElementById("coursGenere").appendChild(divGlobal);			
 
			// div à l'intérieur de divGlobal
			var titreCours = document.createElement("div");
			titreCours.appendChild(document.createTextNode(champApplications[i][1][j].titreCours))	;
			titreCours.className = "courDetail";
			divGlobal.appendChild(titreCours);		
		}
	}
}
 
 
function basculeCours() 
{	
	if(derniereListeCours!=null) {
		derniereListeCours.style.display = "none";
	}
 
	var listeCours = this.nextSibling;
		listeCours.style.display = (listeCours.style.display=="inline")?"none":"inline";
		derniereListeCours = listeCours;
}

Merci!!!
Isabelle

[bigboomshakala]

salutation bienheureuse

bon, je n'ai fait qu'un parcours rapide de ton code. mais je vois déjà une chose

Code :

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

1
2
3
4
5
6
7
8
9
10
function basculeCours() 
{	
	if(derniereListeCours!=null) {
		derniereListeCours.style.display = "none";
	}
 
	var listeCours = this.nextSibling;
		listeCours.style.display = (listeCours.style.display=="inline")?"none":"inline";
		derniereListeCours = listeCours;
}

this ici ne désigne pas l'élément qui a généré l'événement mais la fonction basculeCours. ta fonction fonctionne comme une classe. si tu fais

Code :

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

1
2
3
4
5
6
7
 
function maFonction()
{
  this.tata = "salut";
}
var toto = maFonction();
alert(toto.tata); // affiche "salut"

remplace par

Code :

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

1
2
3
function basculeCours(e){ 
var listeCours = e? e.target.nextSibling : event.srcElement.nextSibling;
}