Fonction afficher/cacher un div, cacher les autres.

Résolu/Fermé
Tunis - 10 janv. 2013 à 15:35
 Un webmaster... - 26 sept. 2014 à 18:03
Bonjour,


Apres avoir passez plusieurs heures sur le net a la recherche d'exemple de code fonctionnant pour ma tache ( a savoir afficher/cacher des div selon les choix du visiteur) j'en viens a poster mon bout de code ici en espérant trouver une âme charitable qui pourra m'expliquer pourquoi ça ne marche pas ^^.



function toggleDiv(TypeDiv, Numero, TotalNB){
	var div = TypeDiv+Numero;
	for(i = 1; i <= TotalNB; i++) {
		if(document.getElementById(TypeDiv+i) == document.getElementById(div)) {
			var DivClic = document.getElementById(div).style; 
			DivClic.display=styl.display == "none"?"block":"none";
		}
		else {
			var AutreDiv=document.getElementById(TypeDiv+i).style; 
			AutreDiv.display="none"; 
		}
	}
}

donc voila la fameuse fonction, je me suis inspiré d'une fonction toute simple qui permet d'afficher toutes les div et j'ai essayer de la modifier pour avoir le résultat voulu.


donc j'envoi a la fonction le type de div, a savoir le nom de l'id
j'envoi le numéro de la div,
et le nombre total de div de ce type la.
je crée la variable div pour dire quelle div a été choisi par le visiteur et donc je l'affiche ou la masque selon le status actuel.
si ce n'est pas celle sélectionné, je masque simplement.


voici le code html :
<a href="#" onclick="toggleDiv('champion', '1', '3');" >champion 1</a><br  />
<a href="#" onclick="toggleDiv('champion', '2', '3');" >champion 2</a><br  />
<a href="#" onclick="toggleDiv('champion', '3', '3');" >champion 3</a><br  />
<div id="champion1" style="display:none">c moche 1</div>
<div id="champion2" style="display:none">c moche 2</div>
<div id="champion3" style="display:none">c moche 3</div>



bien sur la c'est du code tout moche mais le but final sera d'avoir une liste d'image différente selon les choix avec pour chaque image les résultat de la requête sql sur cette image.

j'ai essayer sans les "", sans les '', rien ne marche donc le problème doit venir de la fonction elle même seulement je ne m'y connais pas assez en js pour réussir a voir ou l'erreur est et c'est pourquoi je viens demander de l'aide :).

je pense bien que le problème doit venir de mon if mais je ne vois pas comment le changer autrement.

Merci d'avance a ceux qui m'aiderons !

Tunis


Ps : pour ceux intéressé voici la fonction qui me sert de base :

function disp(calque){ 
	var i = 1; 
	while ( document.getElementById(calque+i) != null ){ 
		var styl = document.getElementById(calque+i).style; 
		styl.display = styl.display == "none"?"block":"none"; 
		i++; 
	} 
}

6 réponses

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 125
Modifié par Nhay le 10/01/2013 à 15:57
Je t'ai corriger ta fonction :D

<script>function toggleDiv(TypeDiv, Numero, TotalNB){ 
 var div = TypeDiv+Numero; 
 for(i = 1; i <= TotalNB; i++) { 
  if(document.getElementById(TypeDiv+i) == document.getElementById(div)) { 
   var DivClic = document.getElementById(div).style;  
   (DivClic.display == "none") ? DivClic.display="block":DivClic.display="none"; 
  } 
  else { 
   var AutreDiv=document.getElementById(TypeDiv+i).style;  
   AutreDiv.display="none";  
  } 
 } 
} 
</script>


Erreur 1, tu avais styl au lieu de style
Erreur 2, ton opérateur ternaire n'étais pas complet.
1