Hide déféctueux en Javascript

Fermé
nOuka - 1 avril 2011 à 14:17
Eastchild Messages postés 319 Date d'inscription lundi 23 juillet 2007 Statut Membre Dernière intervention 28 mars 2012 - 1 avril 2011 à 15:23
Bonjour,

Bon voilà j'ai pas trop l'habitude de programmer en JVS mais là, pas le choix. Donc en gros j'ai une liste déroulante avec des éléments reliés à des div.
Et j'aimerais qu'à chaque fois que je clique sur un de ses éléments, les div non concernées soient cachées. Jusque là tout va bien sauf que, cela ne marche que pour mon premier élément !
Une solution ?

Je vous met le code en raccourci (sinon c'est 120 lignes --__--")

<script language="Javascript">
// mes fonctions de repérage par class + hide + show
function getElementsByClassName( tag_, class_){
	var i, k;
	var T_Result = new Array(); // tableau des Objets en retour
        //-- Recup le tableau d'objets correspondant au tag
	var O_Tab = document.getElementsByTagName( tag_);
	// pour chaque classe on test si l'objet est du même type de classe...
		for ( var t = 0; t < class_.length; t++){
			for( i=0, k=0; i < O_Tab.length; i++){
			        //-- Pour chacun on test la class
				if( O_Tab[i].className == class_[t]){
					T_Result.push(O_Tab[i]); // stock l'objet
				}
			}
		}
		return( T_Result); // on retourne le tableau d'objet
}
			
var mem=document.getElementsByClassName("mem");
var me=document.getElementsByClassName("me");
var mo=document.getElementsByClassName("mo");
var vo=document.getElementsByClassName("vo");
			
function Cache_ByClass( tag_, class_){
	var Obj = getElementsByClassName( tag_, class_);
	for( i=0; i < Obj.length; i++){
		Obj[i].style.display = "none";
	}
}

function Voir_ByClass( tag_, class_){
	var Obj = getElementsByClassName( tag_, class_);
	for( i=0; i < Obj.length; i++){
		Obj[i].style.display = "block";
	}
}
</script>

<body onload="getElementsByClassName('mem');getElementsByClassName('me');getElementsByClassName('mo');getElementsByClassName('vo');">
//mon formulaire avec la liste + bouton qui appelle une autre fonction
	<form name="formulaire"><br>
<!-- on donne la valeur '' (vide) a la premiere option, une vraie valeur aux autres -->
		<select name="liste">	
			<option value="" onclick="Voir_ByClass( 'div',['mem','me','mo','vo']);">Sélectionnez un département
			<option value="Meurthe-et-Moselle" onclick="Voir_ByClass( 'div',['mem']);Cache_ByClass('div',['me','mo','vo']);">54 - Meurthe-et-Moselle
			<option value="Meuse" onclick="Voir_ByClass( 'div',['me']);Cache_ByClass('div',['mem','mo','vo']);">55 - Meuse
			<option value="Moselle" onclick="Voir_ByClass( 'div',['mo']);Cache_ByClass('div',['mem','me','vo']);">57 - Moselle
			<option value="Vosges" onclick="Voir_ByClass( 'div',['vo']);Cache_ByClass('div',['mem','me','mo']);">88 - Vosges
		</select><br />
		<input type="button" OnClick="selectvide();" value="Verification"><br>
	</form>
</body>


Je pense que c'est peut être un problème de réinitialisation de la fonction Cache_ByClass ou Voir_ByClass.
Si vous avez besoin de plus pour m'aider je vous mets tout ! Merci d'avance !
A voir également:

1 réponse

Eastchild Messages postés 319 Date d'inscription lundi 23 juillet 2007 Statut Membre Dernière intervention 28 mars 2012 31
1 avril 2011 à 15:23
Bonjour,

Je pense que cela ne sert à rien de faire 2 fonctions différentes. Teste avec un if si l'affichage est en block ou en none :

function Voir_ByClass( tag_, class_){
	var Obj = getElementsByClassName( tag_, class_);
	for( i=0; i < Obj.length; i++){
                if(Obj[i].style.display == "block"){
                       Obj[i].style.display = "none";
                }else{
		       Obj[i].style.display = "block";
                }
	}
}


ça devrait te simplifier la tache.
0