Récapitulatif :
* A l'origine je recherchais un script qui me permettais de faire apparaitre des DIV (id) au clic d'un lien et de faire disparaitre les autres par la même occasion. Je remercie d'ailleurs PetoleTeam qui m'a permis d'y arriver...
* Maintenant je voudrais faire la même chose mais avec des Class afin de faire disparaitre ou apparaitre plusieurs éléments...
En effet la fonction que j'utilisais dans le 1er cas était
getElementById
mais
getElementByClass
n'existe pas elle.
Donc pour résumer je voudrais arriver à la même chose que le lien qui suit mais avec des Class et non des ID : http://wayoforient1.free.fr/portfolio/test/test.html
PetoleTeam : J'ai essayé ta dernière solution, elle fonctionne bien cependant elle ne me permet pas de faire disparaitre les autres class lorsque j'en fait apparaître une... ou inversement, elle ne me fait pas réaparaître les autres lorsque que j'en cache une :
http://wayoforient1.free.fr/portfolio/test/test2.html
Zobibol
Messages postés469Date d'inscriptionmercredi 9 janvier 2002StatutMembreDernière intervention20 février 20176 18 janv. 2007 à 16:18
Bien le bonjour, le problème que tu rencontres est "normal" :
lorsque tu appeles ta méthode :
getElementsByClassName, seul le deuxième paramètre est tester ( class_ )
donc, quand tu fais :
Cache_ByClass ('li','print','webdesign');"
il ne va te cacher que la classe "print" pas la classe webdesign.
pour contourner ton problème :
il faut parcourir l'ensemble des class_
donc :
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
}
et lors de l'appel de Cache_ByClass et Voir_ByClass(
il faut que tu encadres tes classes par des [] pour indiquer que c'est un tableau de classe tu obtients du coup
Voir_ByClass( 'li',['print']); Cache_ByClass( 'li',['multimedia','webdesign']);"
skullo
Messages postés73Date d'inscriptionmardi 6 juillet 2004StatutMembreDernière intervention18 septembre 2011 18 janv. 2007 à 15:09
J'ai essayé d'intégrer le
Cache_ByClass
et le
Voir_ByClass
au cas ou mais ça ne fonctionne pas non plus.
Dans l'ancienne version (avec le
getElementsById
) le script cachait automatiquement tous les DIV hormis celui qui était appellé...
Enfin bref, voici ce que j'ai fais en alternative mais qui ne fonctionne quand même pas (mouhahaha que je suis mauvais -_-') :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body{
font-family: Verdana;
font-size: 13px;
}
.multimedia{
display: inline;
background-color:#f0c0c0;
}
.webdesign{
display: inline;
background-color:#c0f0c0;
}
.print{
display: inline;
background-color:#c0c0f0;
}
</style>
<script language="JavaScript" type="text/JavaScript">
//--------------------------------------------
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 chacun on test la class
for( i=0, k=0; i < O_Tab.length; i++){
if( O_Tab[i].className == class_){
T_Result[k++] = O_Tab[i]; // stock l'objet
}
}
return( T_Result); // on retourne le tableau d'objet
}
//-----------------------------------
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 = "inline";
}
}
</script>
</head>
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 18 janv. 2007 à 16:20
ReSalut...
Je pensais que tu mettrais la solution facilement en oeuvre, en effet il suffit de reprendre le principe précédent à savoir Tout Cacher avant de réafficher...
Une solution, certes moins aboutie que la précédente, pourrait être la suivante, création de la fonction Cahe_ALL comme suit...
//------------------
function Cache_ALL(){
Cache_ByClass( 'li', multimedia');
Cache_ByClass( 'li', print');
Cache_ByClass( 'li', webdesign');
}
avec appel de la fonction dans...
//----------------------------------
function Voir_ByClass( tag_, class_){
//-- On cache tout avant
Cache_ALL();
//-- Puis affichage normal
var Obj = getElementsByClassName( tag_, class_);
for( i=0; i < Obj.length; i++){
Obj[i].style.display = "inline";
}
}
Nul doute que les fonctions Voir et Cache_ByClass pourraient être optimisée avec la liste des arguments, mais bon on verra plus tard...
skullo
Messages postés73Date d'inscriptionmardi 6 juillet 2004StatutMembreDernière intervention18 septembre 2011 22 janv. 2007 à 10:47
Désolé pour le retard de ma réponse mais weekend oblige j'ai pris un peu de distance avec l'ordinateur.
Zobibol : Merci pour ta solution, elle fonctionne parfaitement ! J'ai compris le coup des crochets parcontre la modif du script pour qu'il aille chercher toutes les class je comprends le principe mais impossible pour moi de traduire en français ce script... Chose que je regrette d'ailleurs !
PetoleTeam : Du coup je n'ai pas essayé cette solution là mais merci quand même.
"
Je pensais que tu mettrais la solution
facilement en oeuvre, en effet il suffit de reprendre le principe
précédent à savoir Tout Cacher avant de réafficher..." ---> C'était sans savoir que je suis un très mauvais programmeur :) ... Enfait à la base je suis Webdesigner mais il est de plus en plus nécessaire de se tourner également vers le javascript, l'actionscript et autre langage de prog pour développer des sites internet et autre... Donc j'apprends sur le tas mais je suis incapable de réaliser mes propres codes... Je pars toujours de sources que j'essaye plus ou moins de modifier... Voilà ! Mais je commence à m'y mettre doucemement même si le chemin qu'il me reste à parcourir est encore plus que très long :)
Merci à tous les 2 pour votre aide ! C génial !
Plus que cordialement !
Rémy
Vous n’avez pas trouvé la réponse que vous recherchez ?
PetoleTeam
Messages postés3426Date d'inscriptionlundi 26 décembre 2005StatutMembreDernière intervention14 janvier 201117 31 janv. 2007 à 19:02
B
onjour...
Deux techniques au moins
1/ Gestion par cookies mais si désactivé par le promeneur alors pas top...
2/ Gestion par l'URL avec passage de paramètre du type lien avec lapage.htm?OPT= 1 il suffit de glisser cela dans les balise
<script type="text/javascript">
//-- récupération de l'option choisie
var Num = window.location.search
var Tab = Num.split('=')); // recup de ?OPT et 1
Num_Option = Tab[1];
//-- la suite du js ...etc... </script>
Il va de soit que le lien vers la page doit être construit, d'ou plusieurs inconvenients...
- si le javascript est désactivé par le promeneur...vraiment pas top ton site est figé
- pour le référencement c'est pas le pied non plus.