Accueil > Forum > > > > function getElementsByClassName
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
|
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
|
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
|
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
Livres en rapport
|
Derniers Blogs
JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|