Javascript切换可见性多个div

Question

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

这是一个包含一些代码和脚本的页面,我在我的网站中使用图像库,但是当尝试切换多个div的可见性时,它只适用于第一个.可以有人请修复它与多个div的工作,我不知道js :)

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

这是链接的html代码

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

等一下,这可能不起作用,因为它试图通过"id"属性访问多个div的属性,它是否可以使用类属性,如果是这样,我只需更改java脚本,它说"id"到"班级"

Answer 1

看来你正在尝试类似的东西

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

toggle_visibility('a');

问题是每个id在文档中必须是唯一的,因此document.getElementById返回单个元素,而不是元素集合.

然后,如果您想拥有多个具有相同ID的元素,则应该使用类.

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

如果要使其适用于多个类,请使用

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