1

divを表示/非表示にするための冗長なプロセスがあり、それをより効率的にする方法はループを使用することだと思います。

現在、私はドキュメント全体に多数のdivを持っていますが、特に6つ扱いたいと思っています。6つのdivに対応する一連のボタンがあります。人がボタンをクリックすると、AIはdiv Aを表示（表示）し、DivのB、C、D、E、Fを非表示にします。私のJavaScriptは次のようなものです：

<a href="#" onclick="ShowMe('A'); return false" />
<a href="#" onclick="ShowMe('B'); return false" />
<a href......etc />

<div id="A">blah...blah</div>
<div id="B">blah...blah</div>

<script type="java....">

   function ShowHideDiv(DivName)
   {
      if(DivName == 'A')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'visible';

         var divb = document.getElementById('B');
         div.style.visibility = 'hidden';

         etc....
      }
      else if (DivName == 'B')
      {
         var diva = document.getElementById('A');
         div.style.visibility = 'hidden';

         var divb = document.getElementById('B');
         div.style.visibility = 'visible';
         etc...............
      }

   }

</script>

先に述べたように、ループの最有力候補ですが、私の質問はループをどのように封じ込めるかです。たとえば、ループがドキュメントオブジェクト全体を通過した場合、非表示にして表示したいdivがあるので、これを回避するにはどうすればよいですか？

私は2つの考えを持っていましたが、他の人が追加の考え、アイデア、テクニックなどを持っていた場合でした。

  1. 私のdivにShowHide_Aのように名前に本当に奇妙な接頭辞を付けると、ループはドキュメントオブジェクト内のすべてのdivを調べ、その名前を解析できます。接頭辞がない場合は、次のdivに移動します。もちろん、大きなドキュメントがあり、スクリプトがすべてのオブジェクトを取得して解析してから名前をチェックしている場合、これは非常に非効率的です。

  2. 問題のdivを次のような親コンテナにラップします。

次に、私のjavascriptを、DivParentツリーだけをループするように含めることができます。しかし、私のdivがドキュメントモデルのさまざまな場所にある場合はどうなりますか？それらをParentDivに保持し、css位置プロパティでそれらが属する場所に配置しますか？

他のアイデアは大歓迎ですJB

4

4 に答える 4

2

より良いアプローチを提案させてください。

jQueryを使用できる場合は、次の操作を実行できます。

boxすべてのdivにクラス（例）を割り当てます。次に、ボタンでこの関数を呼び出す必要があります。

function toggleDiv (divID) {
    $(".box").hide();
    $("#"+divID).show();
}

また、非表示/表示するdivのIDを含むボタンにeg属性を割り当てることもできdata-divます。次に、上記を次のように変換できます（ボタンにbuttonクラスがあると仮定します）。

$(".button").click(function () {
    var divID = $(this).attr("data-div");
    $(".box").hide();
    $("#"+divID).show();
});

上記はすべてをカバーし、ボタンへのイベントの割り当てとdivの非表示/表示を行います。

于 2013-03-25T13:35:25.470 に答える
2

このようなマークアップがあるとしましょう

<div id="A" class="marked" >A</div>
<div id="B" class="marked" >B</div>
<div id="C" class="marked" >C</div>
<div id="D" class="marked" >D</div>
<div id="E" class="marked" >E</div>

<input type="button" value="Show A" data-target-div="A"  />
<input type="button" value="Show B" data-target-div="B" />

次に、次のようなスクリプトを追加します。

$('input[type=button]').click(function(){
    $('.marked').hide(200);
   $('#'+$(this).data('target-div')).show();
});

動作するはずです。

このフィドルを参照してください

したがって、すべてのdom要素を反復処理するのではなく、処理する必要のある要素を正確に選択します。クリックすると、それらすべてを非表示にし、ターゲットであるものを表示します。data-target-div

于 2013-03-25T13:39:35.417 に答える
1

jQueryベースのソリューション：

divにクラスを追加して、非表示/表示を許可してから、

function ShowHideDiv(DivName)
{
    $(".ShowHide").not("#" + DivName).hide();
    $("#" + DivName).show();
}
于 2013-03-25T13:32:15.477 に答える
0

そのような各DIVにclass='switchable'（または何でも）を追加し、prototype.jsを使用して次のようなことを行うことができます

function showMe( elem ) {
  $$( '.switchable' ).each( function( switchable ) {
    if ( switchable.id == $(elem).id )
      switchable.show();
    else
      switchable.hide();
  } );
}
于 2013-03-25T13:38:40.137 に答える