Visibilité de basculement Javascript multiple divs

Http://blog.movalog.com/a/javascripttoggle-visibility/

Il s'agit d'une page avec un code et un script que j'utilise dans mon site pour une galerie d'images, mais lorsque vous essayez de basculer la visibilité de plusieurs div, cela ne fonctionne que sur le premier. Quelqu'un peut-il le réparer pour fonctionner avec plusieurs div, je ne sais pas js 🙂

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

Attendez une seconde, pourrait-il ne pas fonctionner car il essaie d'accéder aux propriétés de plusieurs divs via la propriété "id", cela fonctionnerait-il avec la propriété de classe et si oui, je changerais simplement le script java où il dit "id" classer"

Il semble que vous essayiez quelque chose comme

 <div id="a"></div> <div id="a"></div> toggle_visibility('a'); 

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

Ensuite, si vous souhaitez avoir plus d'un élément avec le même identifiant, vous devriez utiliser des 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 souhaitez que cela fonctionne avec plusieurs classes, utilisez

 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']); 

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 appelez-le comme

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

Une autre façon possible est d'utiliser une variable d' arguments , mais cela 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 appelez-le comme

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

Si vous ne souhaitez 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'); 

Vous devez parcourir une liste d'identifiants ou utiliser un nom de classe comme argument de toggle_visibilty —- ce qui signifie que vous devriez modifier la fonction. Il semble que vous appelez simplement toggle_visibility sur un élément.

JQuery facilite ce genre de chose:

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

Il y a une erreur très idiote dans votre code … Ajoutez l'attribut id dans les tags td id = 'nyc', etc. et cela devrait fonctionner correctement