Javascript切換可見性的多個div

Question

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

這是一個頁面，其中包含一些代碼和一個腳本im在我的網站中用於圖片庫，但是，當嘗試切換多個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屬性一起使用，如果可以的話，我將更改“ id”所在的Java腳本去“上課”

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

Answer 2

您可以使用

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

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

Answer 4

您的代碼中有一個非常愚蠢的錯誤。在td標簽中添加id屬性id ='nyc'，依此類推，它應該可以正常工作