Javascript activer / désactiver la visibilité de plusieurs divs

http://blog.movalog.com/a/javascript-toggle-visibility/

c'est une page avec un code et un script im en utilisant dans mon site pour une galerie d'images, cependant lorsque vous essayez d'activer /désactiver la visibilité de plusieurs div est qu'il ne fonctionne que sur le premier. quelqu'un peut s'il vous plaît corriger pour qu'il fonctionne avec plusieurs div, je ne sais pas js 🙂

ici, c'est le javascript 

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

et voici le code html pour les liens

<tr><td><a href="#" onclick="toggle_visibility('nyc');">New York</a></td>
<td><a href="#" onclick="toggle_visibility('photoshop');">Photoshop Work</td>
<td><a href="#" onclick="toggle_visibility('photography');">Photography</td></tr>
<tr><td><a href="#" onclick="toggle_visibility('art');">Art Projects</td></tr>

attends, ne pourrait-on pas travailler parce qu'il est en train d'essayer d'accéder à un les propriétés de plusieurs divs via la propriété "id", serait-il travailler avec la classe de la propriété et si ce serait je viens de changer le script java, où il est dit "id" à la "classe"

  • Pouvez-vous montrer votre code de plusieurs divs?
  • Aucune raison pour <!--s dans les balises de script? Ou êtes-vous cibler les navigateurs plus anciens de Netscape 2?
  • Qui divs voulez-vous que ceci affecte? Êtes-vous de les identifier avec leur id ou avec des noms de classe?
  • Chaque id doit être unique dans le document. Si vous voulez avoir plus d'un élément avec le même id, vous devez utiliser les classes à la place.
InformationsquelleAutor user2072017 | 2013-07-14
  1. 6

    Il semble que vous essayez quelque chose comme

    <div id="a"></div>
<div id="a"></div>

toggle_visibility('a');

    Le problème est que chaque id doit être unique dans le document, afin de document.getElementById renvoie à un élément unique, n'est pas une collection d'éléments.

    Alors, si vous voulez avoir plus d'un élément avec le même id, vous devez utiliser les classes à la place.

    <div class="a"></div>
<div class="a"></div>


function toggle_visibility(cl){
   var els = document.getElementsByClassName(cl);
   for(var i=0; i<els.length; ++i){
      var s = els[i].style;
      s.display = s.display==='none' ? 'block' : 'none';
   };
}
toggle_visibility('a');

    Si vous voulez le faire fonctionner avec plusieurs classes, l'utilisation

    var toggle_visibility = (function(){
   function toggle(cl){
       var els = document.getElementsByClassName(cl);
       for(var i=0; i<els.length; ++i){
          var s = els[i].style;
          s.display = s.display==='none' ? 'block' : 'none';
       };
   }
   return function(cl){
      if(cl instanceof Array){
         for(var i=0; i<cl.length; ++i){
            toggle(cl[i]);
         }
      }else{
         toggle(cl);
      }
   };
})();
toggle_visibility('myclass');
toggle_visibility(['myclass1','myclass2','myclass3']);
    • pourriez-vous me montrer le code que j'aurais besoin de changer, juste le script et si j'aurais besoin de changer les boutons. Je l'ai déjà changé tous les éléments pour utiliser la classe de la balise.
    • fonctionne comme un charme mate, merci un tas
    • Sachez que document.getElementsByClassName ne fonctionne pas sur les anciens navigateurs. Voir tableau de compatibilité du navigateur ici: developer.mozilla.org/en-US/docs/Web/API/...
    • est-il un moyen de le faire fonctionner avec plus d'une classe toggle_visibility('a','b','c');
    • Oui, j'ai mis à jour ma réponse avec qui, basé sur mon autre réponse (stackoverflow.com/a/17642471/1529630).
    InformationsquelleAutor Oriol
  2. 4

    Vous pouvez utiliser

    function toggle_visibility(id) {
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   if(id instanceof Array){
      for(var i=0; i<id.length; ++i){
         toggle(id[i]);
      }
   }else{
      toggle(id);
   }
}

    Et de l'appeler comme

    toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);

    Une autre façon est d'utiliser arguments variable, mais qui pourrait ralentir votre code

    function toggle_visibility() {
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   for(var i=0; i<arguments.length; ++i){
      toggle(arguments[i]);
   }
}

    Et de l'appeler comme

    toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');

    Si vous ne voulez pas créer la fonction toggle chaque fois que vous appelez toggle_visibility (merci @David Thomas), vous pouvez utiliser

    var toggle_visibility = (function(){
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   return function(id){
      if(id instanceof Array){
         for(var i=0; i<id.length; ++i){
            toggle(id[i]);
         }
      }else{
         toggle(id);
      }
   };
})();
toggle_visibility('myid');
toggle_visibility(['myid1','myid2','myid3']);

    Ou

    var toggle_visibility = (function(){
   function toggle(id){
      var el = document.getElementById(id);
      el.style.display = el.style.display==='none' ? 'block' : 'none';
   }
   return function(){
      for(var i=0; i<arguments.length; ++i){
         toggle(arguments[i]);
      }
   };
})();
toggle_visibility('myid');
toggle_visibility('myid1','myid2','myid3');
    • J'aime l'approche, mais vous êtes à la création/déclaration d'un nouveau toggle() fonction chaque fois que vous appelez toggle_visibility() (qui est un peu inutile).
    InformationsquelleAutor Oriol
  3. 0

    Vous avez besoin de faire défiler une liste d'id ou de l'utilisation d'un nom de classe comme argument de toggle_visibilty ---- ce qui signifie que vous auriez à modifier la fonction. Il ressemble à droite vous êtes maintenant en n'appelant toggle_visibility sur un seul élément.

    jQuery qui rend ce genre de chose plus facile:

      <code>
  //selects all elements with class="yourClassName"
  jQuery(".yourClassName").toggle();

  //select all divs
   jQuery("div").toogle();

  //select all divs inside a container with id="myId"
 jQuery("#myId > div").toggle();
 </code>
    InformationsquelleAutor mostly_perl_guy
  4. 0

    Il est très bête erreur dans votre code..
    Ajouter le id attribut dans les balises td id='nyc', etc. et il devrait fonctionner correctement

    InformationsquelleAutor