3

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

これは、私のサイトで画像ギャラリー用に使用しているコードとスクリプトを含むページですが、複数の div の表示を切り替えようとすると、最初の 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のプロパティにアクセスしようとしているため、これが機能しない可能性があります。クラスプロパティで機能しますか？そうであれば、「id」と表示されているJavaスクリプトを変更します授業へ"

4

4 に答える 4

6

のようなことを試みていたようです。

<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']);
于 2013-07-14T18:56:55.323 に答える
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呼び出すたびに関数を作成したくない場合toggle_visibility（@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');
于 2013-07-14T18:42:45.960 に答える
0

ID のリストを循環するか、toggle_visibilty の引数としてクラス名を使用する必要があります ---- つまり、関数を編集する必要があります。現在、1 つの要素でのみ 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>
于 2013-07-14T18:43:25.767 に答える