Discussion :

[boutmos]

bonjour,

J'ai fais une fonction qui me permet de montrer/cacher un element de type Id, le probleme c'est qu'en terme de validation CSS/XHTML, le fait d'avoir 2 id identiques n'est pas tres correct. Donc, j'aimerais que cet element soit du type class, existe il un equivalent de getElementById pour un objet de type class ?? Merci

voici mon code :

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
 
		/**
		* Cacher / Montrer la reponse		
		*/
 
		var reponse_state = 'hidden';
 
		function switch_reponse()
		{
			var reponse = document.getElementById("reponse");
			switch (reponse_state)
			{
				// hide
				case 'shown':
					reponse_state = 'hidden';
					reponse.style.display = 'none';
				break;
 
				// show
				case 'hidden':
					reponse_state = 'shown';
					reponse.style.display = 'block';
				break;
			}
		}

Code :

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

1
2
3
4
5
 
<li>
  <a class="CatItem" href="#" onclick="switch_reponse();">Quelle est la couleur du chaval blanc d'Henri IV ?</a>
  <p id="reponse">Lorem Ipsum is simply dummy text</p>
</li>

cdt,

[E.Bzz]

Bonjour,

en terme de validation CSS/XHTML, le fait d'avoir 2 id identiques n'est pas tres correct.

Heu .... en fait est strictement interdit est génère des erreurs à l'exécution

Mais peux-tu préciser ton problème : a priori, tu ne vas afficher que la réponse à une seule question (donc un seul élément à afficher/masquer) et l'ID semble approprié, non ?

As-tu besoin de gérer plusieurs affichages simultanément ?

A+

[le_chomeur]

par contre tu peux faire ça :

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
 
function getClass(myObject){
	with(myObject){
		var x = className;
		listeClass = x.split(" ");
		//On parcours le tableau pour voir si l'objet est de type classDefinit
		myObjectClick = null;
		for(var i = 0 , l = listeClass.length; i < l ; i++){
			if(listeClass[i] == classDefinit){
				return true;
			}
		}
 
	}
	return false;
}

sur ton objet tu fait :

Code :

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

onclick="mafonction(this)"

puis :

Code :

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

1
2
3
function mafonction(monObjet){
var estDuBontype = getClass(monObjet);
}

juste avant tu auras définis une variable globale :

classDefinit = nomDeLaClasseVoulut

voila

[boutmos]

En fait le probleme qui se poser a moi c'est que lorsque je vais cliquer sur une question, je risque d'avoir l'ensemble des reponses qui vont s'afficher en même temps.

J'aimerais juste afficher la reponse a la question cliquée. Cette reponse pourrait ( a determiner avec mon boss) soit rester affichée si je cliques sur une autre question ou soit elle se masquera automatiquement lorsque je cliquerais sur une autre question.

La j'en suis au debut, j'aimerais partir sur une bonne base et donc dans un premier temps ecrire mon script pour un element de type class.

[boutmos]

Heu, je n'ai pas tres bien compris ta reponse : le_chomeur

Je suis pas tres famillier avec la POO. Desolé.

[le_chomeur]

avec le code que je t'ai donné ...
si tu connais le type délément ( input, a , span ... )

tu fais un getElementsByTagName('span')
tu va donc récupèrer tous les éléments , puis pour chacun d'entre eux, tu appels ma méthode précédente ...

après il y a diverses améliorations ...

[E.Bzz]

En fait le probleme qui se poser a moi c'est que lorsque je vais cliquer sur une question, je risque d'avoir l'ensemble des reponses qui vont s'afficher en même temps.

J'aimerais juste afficher la reponse a la question cliquée.

Code :

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

1
2
3
4
<li id="27">
  <a class="CatItem" href="#" onclick="switch_reponse(this);">Quelle est la couleur du chaval blanc d'Henri IV ?</a>
  <p id="reponse_27" style="display:none;">Lorem Ipsum is simply dummy text</p>
</li>

avec

Code :

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

1
2
3
4
function switch_reponse(obj) {
var q = obj.parentNode.id;
document.getElementById('reponse_'+q).style.display = 'block';
}

A+

[le_chomeur]

allez jour de bonté voila un getElementsByClassName :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
document.getElementsByClassName = function(nomClasse) {
  var TabClassName = new Array();
  var AllElements = document.getElementsByTagName('body')[0].getElementsByTagName('*');
  for (var i = 0 , l = AllElements.length; i < l; i++) {
		listeClass = AllElements[i].className.split(" ");
		//On parcours le tableau pour voir si l'objet appartient a la classe définit
		for(var x = 0 , y = listeClass.length; x < y ; x++){
			if(listeClass[x] == nomClasse){
				TabClassName.push(AllElements[i])
				break;
			}
		}
    }
  return TabClassName;
};
 
</script>
</head>
 
<body>
<span class="toto"></span>
<p class="toto"></p>
<a href="#" class="toto"></a>
<input type="button" class="toto" />
 
<script type="text/javascript">alert("Il y a  : " + document.getElementsByClassName("toto").length + " élément(s) de class toto");</script>
</body>
</html>

[boutmos]

avec le code que je t'ai donné ...
si tu connais le type délément ( input, a , span ... )

tu fais un getElementsByTagName('span')
tu va donc récupèrer tous les éléments , puis pour chacun d'entre eux, tu appels ma méthode précédente ...

après il y a diverses améliorations ...

Desolé mais je n'ai absolument rien compris. Sur ton precedent code , je ne vois même pas ou est le getElementsByTagName('span');

Bon allé, je vais essayer la methode de Buzz qui me semble plus intuitive. Merci quand même mais j'ai besoin de plus de détail et d'accompagnement dans cette avec ta méthode, je ne suis pas famillier au javascript.

Deja lorsque je fais une declaration global de ma variable, mon navigateur d'indique une erreure je fais comme çà :

Code :

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

1
2
3
4
 
<SCRIPT LANGUAGE="javascript">
 
var classDefinit = reponse;

[boutmos]

ok merci je vais essayer de me debrouiller avec tout çà. Merci bcp , je vous tiens au courant de mon avancement.

[le_chomeur]

je t'ai fait en deuxième partit la fonction getElementsByClassName complète ...

[E.Bzz]

je t'ai fait en deuxième partit la fonction getElementsByClassName complète ...

... et tu as aussi une solution avec 2 lignes de code

[le_chomeur]

?? envois envois

[E.Bzz]

?? envois envois

Là


EDIT : bon d'accord, ma soluce est moins pédagogique, mais elle est efficace

A+

[le_chomeur]

mdr on s'était mal compris , je m'attendais a un getElementsByClassName en 2 lignes ^^

oui c'est aussi une autre solution

[boutmos]

J'ai essayé la methode a E.Bzz, elle marche sauf que je trouve çà contragnant de devoir alourdir le XHTML par un Id a chaque LI. Je vais adapter le code pour qu'au second clique, la reponse se cache, ou alors elle se cache d'elle même si on veut afficher la reponse a une autre question. C'est un bon debut en tout cas.

Je vais quand même me pencher sur la solution du chomeur ^^ mais j'ai bcp de mal car une trop grande meconnaissance du javascript.

J'ai cru lire que getElementsByClassName n'etait pas tres recommandé, je me trompe ??? Merci.

[le_chomeur]

au final ce ne serait pas un truc dans ce genre que tu souhaites :

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
40
41
42
43
44
45
46
47
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#faq{
	display:block;
	border:1px solid #666;
}
#faq a{
	display:block;
}
#faq div{
	display:none;
}
 
</style>
<script type="text/javascript">
var nbQuestion = 4 ;
function afficherQuestion(idQuestion){
	//On masque toute les réponses
	for(var i = 1 ; i < nbQuestion+1 ; i++){
		document.getElementById('Question'+i).style.display = 'none';
	}
	document.getElementById('Question'+idQuestion).style.display='block';
}
</script>
 
</head>
 
<body>
<div id="faq">
	Faq :)<br />
	<br />
	<a href="#" onclick="afficherQuestion(1)";return false;>Première question</a>
	<div id="Question1">et la réponse</div>
	<a href="#" onclick="afficherQuestion(2)";return false;>deuxiemme question</a>
	<div id="Question2">et la réponse</div>
	<a href="#" onclick="afficherQuestion(3)";return false;>troisième question</a>
	<div id="Question3">et la réponse</div>
	<a href="#" onclick="afficherQuestion(4)";return false;>quatrième question</a>
	<div id="Question4">et la réponse</div>
</div>
</body>
</html>

[boutmos]

Oui voila c'est a peut pres çà , merci bcp. J'indique résolu.

[boutmos]

LOL je suis passé pour gagner du temps et au final non car même si çà marche, je suis entrain de décortiquer les morceaux de codes que j'ai trouvé ici.

La par exemple j'ai fait quelques recherches et test sur parentNode. Je me suis demandé aussi si l'équivalent pour les fils existait et j'ai trouvé childNodes, donc j'ai refais quelques petits test

Ça faisait longtemps j'avais pas un peu programmer par manques de projets, j'ai beaucoup perdu la main mais je m'aperçois que j'aime toujours autant me prendre la tête sur ces petites lignes

Dsl je raconte ma vie mais ce fut un plaisir, j'espère continuer a avoir quelques projets qui me feront revenir vers vous.

[le_chomeur]

lol tu es le bienvenue