Http://blog.movalog.com/a/javascript–toggle-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