Javascript切换可见性多个div [英] Javascript toggle visibility multiple divs

问题描述

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'）;>纽约< / a>< TD> 
< td>< a href =＃onclick =toggle_visibility（'photoshop'）;> Photoshop Work< / td> 
< td>< a href =＃onclick =toggle_visibility（'photography'）;>摄影< / td>< / tr> 
< tr>< td>< a href =＃onclick =toggle_visibility（'art'）;> Art Projects< / td>< / tr> 
  

等一秒钟，这可能不工作，因为它试图通过通过多个div的属性id属性，它将与类属性一起工作，如果是的话，我只需要将其中的id改为class的java脚本

解决方案

看起来您正在尝试类似于

 < 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 ==='无'？ 'block'：'none'; 
}; 
} 
 toggle_visibility（'a'）; 
  

---

如果您想让它适用于多个类，使用

  var toggle_visibility =（function（）{
函数切换（cl）{
 var els = document.getElementsByClassName（cl）; 
 for（var i = 0; i< els.length; ++ i）{
 var s = els [i] .style; 
 s。 （cl）{
 if（cl instanceof Array（））; ）{
 for（var i = 0; i  toggle（cl [i]）; 
} 
} else {
 toggle（cl）; 
} 
}; 
}）（）; 
 toggle_visibility（'myclass'）; 
 toggle_visibility（['myclass1'，'myclass2'，'myclass3']）; 
  

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

this is a page with some code and a script im using in my site for an image gallery, however when trying to toggle the visibility of multiple div's it only works on the first. can someone please fix it to work with multiple div's, i dont know js :)

here is the 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>

and here is the html code for the links

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

wait a sec, could this not be working because it is trying to acess the properties of multiple divs via the "id" property, would it work with the class property and if so would i just change the java script where it says "id" to "class"

解决方案

It seems that you were trying something like

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

toggle_visibility('a');

The problem is that each id must be unique in the document, so document.getElementById returns a single element, not a collection of elements.

Then, if you want to have more than one element with the same id, you should use classes instead.

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

---

If you want to make it work with multiple classes, use

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

这篇关于Javascript切换可见性多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！