Function getElementsByClassName
Résolu
skullo
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
-
18 janv. 2007 à 14:44
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 31 janv. 2007 à 19:02
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 31 janv. 2007 à 19:02
7 réponses
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
18 janv. 2007 à 16:18
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']);"
reproduire sur chacun de tes options....
Voilà
[o-_-o]
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']);"
reproduire sur chacun de tes options....
Voilà
[o-_-o]
skullo
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
18 janv. 2007 à 15:09
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>
Filtre :
Voir Tous les Travaux
Print
Multimedia
Webdesign
<ol>
<li class="multimedia">MEDIA_1</li>
<li class="print">PRINT_1</li>
<li class="webdesign">WEB_1</li>
<li class="multimedia">MEDIA_2</li>
<li class="print">PRINT_2</li>
<li class="print">PRINT_3</li>
<li class="webdesign">WEB_2</li>
</ol>
</html>
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>
Filtre :
Voir Tous les Travaux
Multimedia
Webdesign
<ol>
<li class="multimedia">MEDIA_1</li>
<li class="print">PRINT_1</li>
<li class="webdesign">WEB_1</li>
<li class="multimedia">MEDIA_2</li>
<li class="print">PRINT_2</li>
<li class="print">PRINT_3</li>
<li class="webdesign">WEB_2</li>
</ol>
</html>
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
18 janv. 2007 à 16:20
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...
;0)
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...
;0)
skullo
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
22 janv. 2007 à 10:47
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
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 ?
Posez votre question
skullo
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
22 janv. 2007 à 14:34
22 janv. 2007 à 14:34
J'allais oublier :)
Si vous voulez un aperçu de ce que ça peut donner dans le cadre de mon utilisation :
http://wayoforient1.free.fr/_temp/divers/portfolio_test/index.html
(biensur la mise en page est nulle, c'est juste un test)
Merci encore
Si vous voulez un aperçu de ce que ça peut donner dans le cadre de mon utilisation :
http://wayoforient1.free.fr/_temp/divers/portfolio_test/index.html
(biensur la mise en page est nulle, c'est juste un test)
Merci encore
skullo
Messages postés
73
Date d'inscription
mardi 6 juillet 2004
Statut
Membre
Dernière intervention
18 septembre 2011
31 janv. 2007 à 11:57
31 janv. 2007 à 11:57
Je rencontre un nouveau petit problème (et surment le dernier) concernant mon filtre travaux :)
Comment faire en sorte que l'option choisie reste validée lorsque j'arrive sur une nouvelle page ?
Comment faire en sorte que l'option choisie reste validée lorsque j'arrive sur une nouvelle page ?
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
31 janv. 2007 à 19:02
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.
;0)
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.
;0)
