begin process at 2012 05 29 08:45:16
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Autre

 > 

function getElementsByClassName


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

function getElementsByClassName

jeudi 18 janvier 2007 à 14:44:29 | function getElementsByClassName

skullo

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 : [ Lien ]

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
jeudi 18 janvier 2007 à 15:09:43 | Re : function getElementsByClassName

skullo

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>
<body>
<p>Filtre :<br />
<input type="radio" name="work" onClick="Voir_ByClass( 'li','print','multimedia','webdesign');" /> Voir Tous les Travaux<br />
<input type="radio" name="work" onClick="Voir_ByClass( 'li','print'); Cache_ByClass( 'li','multimedia','webdesign');" /> Print<br />
<input type="radio" name="work" onClick="Voir_ByClass( 'li','multimedia'); Cache_ByClass( 'li','print','webdesign');" /> Multimedia<br />
<input type="radio" name="work" onClick="Voir_ByClass( 'li','webdesign'); Cache_ByClass( 'li','print','multimedia');" /> Webdesign<br />

<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>

</body>
</html>

jeudi 18 janvier 2007 à 16:18:08 | Re : function getElementsByClassName

Zobibol

Membre Club
Réponse acceptée !
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]
jeudi 18 janvier 2007 à 16:20:28 | Re : function getElementsByClassName

PetoleTeam

Membre Club
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)

lundi 22 janvier 2007 à 10:47:11 | Re : function getElementsByClassName

skullo

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

lundi 22 janvier 2007 à 14:34:54 | Re : function getElementsByClassName

skullo

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
mercredi 31 janvier 2007 à 11:57:06 | Re : function getElementsByClassName

skullo

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 ?

mercredi 31 janvier 2007 à 19:02:03 | Re : function getElementsByClassName

PetoleTeam

Membre Club

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)


Cette discussion est classée dans : function, class, test, http, disparaitre


Répondre à ce message

Sujets en rapport avec ce message

Questions Javascript [ par luigi501 ] Bonjour, je suis en train de programmer un petit jeu. Le jeu ce compose de 20 cases sur une page html avec la possibilité de cliqué sur chacune des ca infobulle sous différant navigateur [ par Thundrax ] Hello,Alors mon problème est simple, j'ai le script de Greengold pour faire de joli info bulle perso, c magique mais ca ne fonctionne que sous-ie... é changement de l'évènenement onclick [ par bernidupont ] Bonsoir à tous, savez vous comment change t on la valeur d'un bouton par exemple qui possède la valeur onclick? voici un exemple très simple d'una pa Mémoire ?! [ par zbabug ] Voici un gadget tout bête qui fait rien. Lorsque je le lance, j'ai bien le message 'init' qui apparait, mais lorsque je l'enlève, le message 'dispose< Probleme menu javascript dans frame [ par yukhaa ] Voila j'ai un menu en javascript que j'ai integré dans une frame, seulement quand je clique su un lien ça me met le message suivant"top.site.location probleme cache avec lecture d'une page html [ par jeanmarc31 ] J'ai un petit problème avec le code ci-desous: function lire_http() { objXml = new ActiveXObject("Microsoft.XMLHTTP" ); var datafile = "http://localh Problème: test de saisie (Envoi de formulaire) [ par darb66 ] Bonjour, Je débute en javascript... J'essaie d'effectuer un test de saisie grâce à la fonction "validation" lors de l'envoi du formulaire :"<input nam question javascript [ par yvonD ] Bonjour,Je viens de tester le code ci-dessous contenu ds un fichier menu.jsfunction new_window() {xyz="open('index.html', 'new', 'width=300,height=150 arriere plan [ par nico606 ] Slt, je ne me rapele plus comment faire pour qu'une image d'arriere plan qui ne couvre pas toute la page ne se mette pas en plusieur fois les une a cô Cherche menu [ par chris81 ] bonjour,je suis a la recherche d'un menu tel que celui lahttp://www.milonic.com/savez vous ou je pe en trouver un mercihttp://www.tarnweb.comhttp://ww


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,577 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales