Hide déféctueux en Javascript

nOuka -  
Eastchild Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Membre Dernière intervention   31
 
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