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+

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

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

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

[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