IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[POO] Equivalent de getElementById mais pour une class ?


Sujet :

JavaScript

Vue hybride

boutmos [POO] Equivalent de... 28/04/2008, 15h25
E.Bzz Bonjour, Heu .... en fait... 28/04/2008, 15h30
boutmos En fait le probleme qui se... 28/04/2008, 15h41
boutmos Heu, je n'ai pas tres bien... 28/04/2008, 15h49
le_chomeur avec le code que je t'ai... 28/04/2008, 15h49
boutmos Desolé mais je n'ai... 28/04/2008, 16h09
E.Bzz <li id="27"> <a... 28/04/2008, 15h54
le_chomeur allez jour de bonté voila un... 28/04/2008, 16h05
le_chomeur par contre tu peux faire ça :... 28/04/2008, 15h40
Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Décembre 2007
    Messages
    233
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 233
    Par défaut [POO] Equivalent de getElementById mais pour une class ?
    bonjour,

    J'ai fais une fonction qui me permet de montrer/cacher un element de type Id, le probleme c'est qu'en terme de validation CSS/XHTML, le fait d'avoir 2 id identiques n'est pas tres correct. Donc, j'aimerais que cet element soit du type class, existe il un equivalent de getElementById pour un objet de type class ?? Merci

    voici mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    		/**
    		* Cacher / Montrer la reponse		
    		*/
     
    		var reponse_state = 'hidden';
     
    		function switch_reponse()
    		{
    			var reponse = document.getElementById("reponse");
    			switch (reponse_state)
    			{
    				// hide
    				case 'shown':
    					reponse_state = 'hidden';
    					reponse.style.display = 'none';
    				break;
     
    				// show
    				case 'hidden':
    					reponse_state = 'shown';
    					reponse.style.display = 'block';
    				break;
    			}
    		}
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    <li>
      <a class="CatItem" href="#" onclick="switch_reponse();">Quelle est la couleur du chaval blanc d'Henri IV ?</a>
      <p id="reponse">Lorem Ipsum is simply dummy text</p>
    </li>
    cdt,

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation Envoyé par boutmos Voir le message
    en terme de validation CSS/XHTML, le fait d'avoir 2 id identiques n'est pas tres correct.
    Heu .... en fait est strictement interdit est génère des erreurs à l'exécution

    Mais peux-tu préciser ton problème : a priori, tu ne vas afficher que la réponse à une seule question (donc un seul élément à afficher/masquer) et l'ID semble approprié, non ?

    As-tu besoin de gérer plusieurs affichages simultanément ?

    A+

  3. #3
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Décembre 2007
    Messages
    233
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 233
    Par défaut
    En fait le probleme qui se poser a moi c'est que lorsque je vais cliquer sur une question, je risque d'avoir l'ensemble des reponses qui vont s'afficher en même temps.

    J'aimerais juste afficher la reponse a la question cliquée. Cette reponse pourrait ( a determiner avec mon boss) soit rester affichée si je cliques sur une autre question ou soit elle se masquera automatiquement lorsque je cliquerais sur une autre question.

    La j'en suis au debut, j'aimerais partir sur une bonne base et donc dans un premier temps ecrire mon script pour un element de type class.

  4. #4
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Décembre 2007
    Messages
    233
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 233
    Par défaut
    Heu, je n'ai pas tres bien compris ta reponse : le_chomeur

    Je suis pas tres famillier avec la POO. Desolé.

  5. #5
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    avec le code que je t'ai donné ...
    si tu connais le type délément ( input, a , span ... )

    tu fais un getElementsByTagName('span')
    tu va donc récupèrer tous les éléments , puis pour chacun d'entre eux, tu appels ma méthode précédente ...

    après il y a diverses améliorations ...

  6. #6
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Décembre 2007
    Messages
    233
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 233
    Par défaut
    Citation Envoyé par le_chomeur Voir le message
    avec le code que je t'ai donné ...
    si tu connais le type délément ( input, a , span ... )

    tu fais un getElementsByTagName('span')
    tu va donc récupèrer tous les éléments , puis pour chacun d'entre eux, tu appels ma méthode précédente ...

    après il y a diverses améliorations ...
    Desolé mais je n'ai absolument rien compris. Sur ton precedent code , je ne vois même pas ou est le getElementsByTagName('span');

    Bon allé, je vais essayer la methode de Buzz qui me semble plus intuitive. Merci quand même mais j'ai besoin de plus de détail et d'accompagnement dans cette avec ta méthode, je ne suis pas famillier au javascript.

    Deja lorsque je fais une declaration global de ma variable, mon navigateur d'indique une erreure je fais comme çà :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    <SCRIPT LANGUAGE="javascript">
     
    var classDefinit = reponse;

  7. #7
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Décembre 2007
    Messages
    233
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Décembre 2007
    Messages : 233
    Par défaut
    ok merci je vais essayer de me debrouiller avec tout çà. Merci bcp , je vous tiens au courant de mon avancement.

  8. #8
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par boutmos Voir le message
    En fait le probleme qui se poser a moi c'est que lorsque je vais cliquer sur une question, je risque d'avoir l'ensemble des reponses qui vont s'afficher en même temps.

    J'aimerais juste afficher la reponse a la question cliquée.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <li id="27">
      <a class="CatItem" href="#" onclick="switch_reponse(this);">Quelle est la couleur du chaval blanc d'Henri IV ?</a>
      <p id="reponse_27" style="display:none;">Lorem Ipsum is simply dummy text</p>
    </li>
    avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function switch_reponse(obj) {
    var q = obj.parentNode.id;
    document.getElementById('reponse_'+q).style.display = 'block';
    }
    A+

  9. #9
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    allez jour de bonté voila un getElementsByClassName :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
    document.getElementsByClassName = function(nomClasse) {
      var TabClassName = new Array();
      var AllElements = document.getElementsByTagName('body')[0].getElementsByTagName('*');
      for (var i = 0 , l = AllElements.length; i < l; i++) {
    		listeClass = AllElements[i].className.split(" ");
    		//On parcours le tableau pour voir si l'objet appartient a la classe définit
    		for(var x = 0 , y = listeClass.length; x < y ; x++){
    			if(listeClass[x] == nomClasse){
    				TabClassName.push(AllElements[i])
    				break;
    			}
    		}
        }
      return TabClassName;
    };
     
    </script>
    </head>
     
    <body>
    <span class="toto"></span>
    <p class="toto"></p>
    <a href="#" class="toto"></a>
    <input type="button" class="toto" />
     
    <script type="text/javascript">alert("Il y a  : " + document.getElementsByClassName("toto").length + " élément(s) de class toto");</script>
    </body>
    </html>

  10. #10
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    par contre tu peux faire ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    function getClass(myObject){
    	with(myObject){
    		var x = className;
    		listeClass = x.split(" ");
    		//On parcours le tableau pour voir si l'objet est de type classDefinit
    		myObjectClick = null;
    		for(var i = 0 , l = listeClass.length; i < l ; i++){
    			if(listeClass[i] == classDefinit){
    				return true;
    			}
    		}
     
    	}
    	return false;
    }
    sur ton objet tu fait :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onclick="mafonction(this)"
    puis :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    function mafonction(monObjet){
    var estDuBontype = getClass(monObjet);
    }
    juste avant tu auras définis une variable globale :

    classDefinit = nomDeLaClasseVoulut

    voila

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [POO] POO pour une classe PDO
    Par nabab dans le forum Langage
    Réponses: 2
    Dernier message: 07/08/2007, 23h58
  2. [POO] Plugins pour une classe ?
    Par PseudoCoder dans le forum Langage
    Réponses: 6
    Dernier message: 05/10/2006, 12h03
  3. Héritage d'un événement pour une classe fille
    Par korntex5 dans le forum Langage
    Réponses: 4
    Dernier message: 11/01/2006, 16h48
  4. Réponses: 8
    Dernier message: 02/11/2005, 20h21
  5. ecrire un iterateur pour une classe
    Par Blowih dans le forum C++
    Réponses: 2
    Dernier message: 15/11/2004, 19h19

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo