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 :

Afficher / masquer div


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre actif
    Profil pro
    Lycéen
    Inscrit en
    Février 2012
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Février 2012
    Messages : 18
    Par défaut Afficher / masquer div
    Bonsoir les amis,
    Je reviens vers vous ce soir, car le code ce n'est pas comme le vélo, ça s'oublie avec le temps :p

    Dur de s'y remettre mais bon on fait aller ! J'ai cependant un petit souci avec un morceau de code ...
    C'est trois fonctions qui vous sembleront très basique, afficher div, masquer div, et afficher / masquer div, et une quatrième pour masquer le tout.

    J'utilise ça car j'ai besoin d'afficher certaines choses en survol (onmouseover), et d'autres en click (onclick)
    Jusqu'ici ça fonctionne, je peux afficher en survol, et avec onmouseout ça disparait. Idem pour le afficher / masquer avec onclick.
    Le tout fonctionne avec "display"


    Mon problème est que je n'arrive pas à faire en sorte que ma fonction afficher / masquer (practice_hide_view) affiche un div à la fois, j'ai essayer de chercher sur mon meilleur ami pour trouver une réponse, alors peut être que je m'exprime mal, cela expliquerai pourquoi je n'ai pas eu de résultat .... :z
    Tout fonctionne, mais je peux afficher div1_2 et div 2_ ... _5 en même temps alors qu'un seul à la fois serai le top (:


    Voici un morceau mon code JavaScript ..
    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
    // JavaScript Document practice info hide + info view & info hide/view
    function practice_view(id)
    {
              document.getElementById(id).style.display = 'block';
    }
    function practice_hide(id)
    {
              document.getElementById(id).style.display = 'none';
    }
    function practice_hide_all_clicked_div()
    {
              document.getElementById('practice_div1_2').style.display = 'none'
              document.getElementById('practice_div2_2').style.display = 'none'
              document.getElementById('practice_div3_2').style.display = 'none'
              document.getElementById('practice_div4_2').style.display = 'none'
              document.getElementById('practice_div5_2').style.display = 'none';
    }
    function practice_hide_view(id){
            if(document.getElementById(id).style.display == "block"){
              document.getElementById(id).style.display = "none";
              document.getElementById('bouton_'+id);
     
            }
            else{
              var alldiv = document.querySelectorAll('[id^="bloc"]');
              for(var i=0; i< alldiv.length;i++) {
                alldiv[i].style.display = "none";
                document.getElementById('bouton_bloc'+ i);
              }
              document.getElementById(id).style.display = "block";
              document.getElementById('bouton_'+id);
            }
          }
    .. et mon html
    Code HTML : 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
    <div id="liens">
    <label onmouseover="practice_view('practice_div1')" onmouseout="practice_hide('practice_div1')" onclick="practice_hide_view('practice_div1_2')">Click ou survol 1</label><br />
    -<br />
    <label onmouseover="practice_view('practice_div2')" onmouseout="practice_hide('practice_div2')" onclick="practice_hide_view('practice_div2_2')">Click ou survol 2</label><br />
    -<br />
    <label onmouseover="practice_view('practice_div3')" onmouseout="practice_hide('practice_div3')" onclick="practice_hide_view('practice_div3_2')">Click ou survol 3</label><br />
    -<br />
    <label onmouseover="practice_view('practice_div4')" onmouseout="practice_hide('practice_div4')" onclick="practice_hide_view('practice_div4_2')">Click ou survol 4</label><br />
    -<br />
    <label onmouseover="practice_view('practice_div5')" onmouseout="practice_hide('practice_div5')" onclick="practice_hide_view('practice_div5_2')">Click ou survol 5</label><br />
    -<br />
    <label onclick="practice_hide_all_clicked_div()">Cacher tout ce qui est actif</label><br /><br />
    </div>
    <div style="display:none" id="practice_div1">div 1 : survol</div>
    <div style="display:none" id="practice_div1_2">div 1_2 : click</div>
    <div style="display:none" id="practice_div2">div 2 : survol</div>
    <div style="display:none" id="practice_div2_2">div 2_2 : click</div>
    <div style="display:none" id="practice_div3">div 3 : survol</div>
    <div style="display:none" id="practice_div3_2">div 3_2 : click</div>
    <div style="display:none" id="practice_div4">div 4 : survol</div>
    <div style="display:none" id="practice_div4_2">div 4_2 : click</div>
    <div style="display:none" id="practice_div5">div 5 : survol</div>
    <div style="display:none" id="practice_div5_2">div 5_2 : click</div>

    Merci pour votre temps

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,
    déjà ta fonction practice_hide_view est bizarre, tu fais appel à des éléments qui n'existent pas dans ton code comme par exemple document.querySelectorAll('[id^="bloc"]'), mais peut-être n'a t'on pas tout.

    Tu peux factoriser tes fonctions pour en simplifier la lecture/exécution.
    Exemple 1
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function practice_hide_all_clicked_div() {
      // récup. de tous les éléments
      const elements = document.querySelectorAll('[id^="practice"]');
      elements.forEach((el) => {
        el.style.display = "none"
      });
      /*  
      document.getElementById('practice_div1_2').style.display = 'none'
      document.getElementById('practice_div2_2').style.display = 'none'
      document.getElementById('practice_div3_2').style.display = 'none'
      document.getElementById('practice_div4_2').style.display = 'none'
      document.getElementById('practice_div5_2').style.display = 'none';
      /*--*/
    }
    Exemple 2
    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
    function practice_hide_view(id) {
      const element = document.getElementById(id);
      let state = "block";
      if (element.offsetWidth) {
        state = "none";
      }
      element.style.display = state;
      /*
      if (document.getElementById(id)
        .style.display == "block") {
        document.getElementById(id)
          .style.display = "none";
        document.getElementById('bouton_' + id);
     
      } else {
        var alldiv = document.querySelectorAll('[id^="bloc"]');
        for (var i = 0; i < alldiv.length; i++) {
          alldiv[i].style.display = "none";
          document.getElementById('bouton_bloc' + i);
        }
        document.getElementById(id)
          .style.display = "block";
        document.getElementById('bouton_' + id);
      }
      /*--*/
    }
    Avec cela tu devrais y voir plus clair.

    Enfin un dernier point serait de supprimer le « code JS inline » et avoir recours à l'attachement d'événement via addEventListener.

  3. #3
    Membre actif
    Profil pro
    Lycéen
    Inscrit en
    Février 2012
    Messages
    18
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Février 2012
    Messages : 18
    Par défaut
    Merci de la réponse

    Effectivement ton code est beaucoup plus simple (: tout fonctionne maintenant

    Merci encore, à bientôt !

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

Discussions similaires

  1. Afficher Masquer Div ET pré-sélection Radio
    Par andrelaurent dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 29/05/2019, 10h06
  2. Afficher masquer DIV suivante sur clic image JavaScript
    Par modus57 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 18/07/2017, 15h03
  3. afficher masquer div bug sous chrome
    Par groskanel dans le forum jQuery
    Réponses: 0
    Dernier message: 25/06/2012, 16h19
  4. afficher masquer div
    Par itanimulli dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 02/03/2012, 13h54
  5. [Problème code] Afficher/Masquer div
    Par glloq8 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 24/03/2006, 14h18

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