Function getElementsByClassName [Résolu]

skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 18 janv. 2007 à 14:44 - Dernière réponse : PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention
- 31 janv. 2007 à 19:02
Voilà,
je reprends la suite de cet ancien post :
http://www.javascriptfr.com/infomsg_ONCLICK-DISPLAY-BLOCK-DISPLAY-NONE-LTDIV-GT_786794.aspx?p=2
car je rencontre un nouveau problème...

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

Encore merci
Afficher la suite 

Votre réponse

7 réponses

Meilleure réponse
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 18 janv. 2007 à 16:18
3
Merci
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]

Merci Zobibol 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 68 internautes ce mois-ci

Commenter la réponse de Zobibol
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 18 janv. 2007 à 15:09
0
Merci
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>
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 18 janv. 2007 à 16:20
0
Merci
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)
Commenter la réponse de PetoleTeam
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 22 janv. 2007 à 10:47
0
Merci
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
Commenter la réponse de skullo
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 22 janv. 2007 à 14:34
0
Merci
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
Commenter la réponse de skullo
skullo 73 Messages postés mardi 6 juillet 2004Date d'inscription 18 septembre 2011 Dernière intervention - 31 janv. 2007 à 11:57
0
Merci
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 ?
Commenter la réponse de skullo
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 31 janv. 2007 à 19:02
0
Merci
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)
Commenter la réponse de PetoleTeam

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.