Javascript切换可见性多个div

Posted 2023-02-21

【中文标题】Javascript切换可见性多个div

【英文标题】：Javascript toggle visibility multiple divs

【发布时间】：2013-07-12 14:52:40

【问题描述】：

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 的属性，它是否可以与 class 属性一起使用，如果可以，我是否只需更改它所说的 java 脚本“id”到“class”

【问题讨论】：

你能展示你的多个div的代码吗？

脚本标签中有<!--s 的任何原因？或者您的目标是 Netscape 2 之前的浏览器？

您希望这影响哪些 div？你是用他们的id 还是类名来识别他们？

每个 id 在文档中必须是唯一的。如果你想拥有多个具有相同 id 的元素，你应该使用类来代替。

【参考方案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']);

【讨论】：

你能告诉我我需要改变的代码吗，只是脚本，如果我需要改变按钮。我已经更改了所有元素以使用类标签。

@user2072017 请注意document.getElementsByClassName 不适用于旧浏览器。在此处查看浏览器兼容性表：developer.mozilla.org/en-US/docs/Web/API/…

有没有办法让它与多个类一起工作 toggle_visibility('a','b','c');

@user2072017 是的，我已经根据我的其他答案 (***.com/a/17642471/1529630) 更新了我的答案。

【参考方案2】：

您的代码中有一个非常愚蠢的错误.. 在 td 标签 id='nyc' 等中添加id 属性，它应该可以正常工作

【参考方案3】：

您要么需要循环遍历 id 列表，要么使用类名作为 toggle_visibilty 的参数 ---- 这意味着您必须编辑函数。看起来你现在只在一个元素上调用 toggle_visibility。

jQuery 让这种事情变得更容易：

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

【参考方案4】：

你可以使用

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

然后这样称呼它

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

---

另一种可能的方法是使用 arguments 变量，但这可能会减慢您的代码速度

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

然后这样称呼它

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

---

如果您不想每次调用toggle_visibility 时都创建函数toggle（感谢@David Thomas），您可以使用

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

或者

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

【讨论】：

我喜欢这种方法，但每次调用toggle_visibility() 时，您都会创建/声明一个新的toggle() 函数（这有点不必要）。