[POO] Equivalent de getElementById mais pour une class ?

Version imprimable

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:

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:

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,

28/04/2008, 15h30
E.Bzz

Bonjour,

Citation:

Envoyé par boutmos

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

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+

par contre tu peux faire ça :

Code:

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:

onclick="mafonction(this)"

puis :

Code:

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

juste avant tu auras définis une variable globale :

classDefinit = nomDeLaClasseVoulut

voila

28/04/2008, 15h41
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.
28/04/2008, 15h49
boutmos

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

Je suis pas tres famillier avec la POO. Desolé.
28/04/2008, 15h49
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 ...

Citation:

Envoyé par 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.
Code:

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:

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

allez jour de bonté voila un getElementsByClassName :

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

28/04/2008, 16h09
boutmos
Citation:

Envoyé par 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 ...

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:

1 2 3 4 <SCRIPT LANGUAGE="javascript"> var classDefinit = reponse;
28/04/2008, 16h12
boutmos

ok merci je vais essayer de me debrouiller avec tout çà. Merci bcp , je vous tiens au courant de mon avancement.
28/04/2008, 16h16
le_chomeur

8O je t'ai fait en deuxième partit la fonction getElementsByClassName complète ...
28/04/2008, 16h20
E.Bzz

Citation:

Envoyé par le_chomeur

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

... et tu as aussi une solution avec 2 lignes de code :triste:
28/04/2008, 16h24
le_chomeur

?? envois envois
28/04/2008, 16h26
E.Bzz

Citation:

Envoyé par le_chomeur

?? envois envois

8O
Là
:koi:

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

A+
28/04/2008, 16h31
le_chomeur

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

oui c'est aussi une autre solution ;)
28/04/2008, 16h55
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.

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

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

:(:(:(

29/04/2008, 09h38
boutmos

Oui voila c'est a peut pres çà , merci bcp. J'indique résolu.
29/04/2008, 10h17
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 :D

Ç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.
29/04/2008, 10h19
le_chomeur

lol tu es le bienvenue ;)