1

HTML内の2つの要素を同時に非表示/再表示するJavaScriptがあります。1つだけの場合は正常に機能しましたが、何らかの理由で2回クリックすると一部の要素が消えるだけです。どこが間違っているのかわかりません。誰かが何か間違ったことを見つけた場合に備えて、コードを次に示します。この関数は、div idが指定された2つの要素（xdivIDとdivID）を再表示し、親と祖父母を表示したままにします（idParent idUncle）

function doubleunhide(xdivID, divID, idParent, idUncle) {
 var xitem = document.getElementById(xdivID);
 if(xitem){
 xitem.className='unhidden';
}
var item = document.getElementById(divID);
 if(item) {
   item.className='unhidden';
   }
   var elements = getElementsByClassName(document, "unhidden");
      var n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];
if ((e.id != divID) && (e.id != xdivID) && (e.id != idParent) && (e.id != idUncle)){
     e.className='hidden';
     }
  }}

そして、これがhtmlでどのように実装されるかです：

<div id="prj" class="hidden" style="margin-left:1em">
    <a href="javascript:doubleunhide('prj011', 'prj01numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj01link">Project 01</a> <br>
    <a href="javascript:doubleunhide('prj021', 'prj02numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj02link">Project 02</a> <br>
    <a href="javascript:doubleunhide('prj031', 'prj03numbers', 'prj', 'nil');" style="text-decoration:none; color: rgb(0,0,0)" id="prj03link">Project 03</a> <br>
    Project 04<br>
    Project 05<br>
    </div>
4

1 に答える 1

2

問題は、ネイティブを使用するとnode.getElementsByClassName()、結果の配列が「ライブ」になることです。動的に変更されてから、ページが変更されます。あなたの場合-次に配列を実行するe.className='hidden';とelements変更されて小さくなります-現在の要素は、渡した検索条件に一致するロガーではないため、消去されますgetElementsByClassName()。しかし、あなたのコードはまだ同じ要素があると考えて、それを繰り返します。最終的に未定義のノードを取得しようとすると、エラーが発生し、スクリプトが壊れました。これを回避するには、逆の順序で繰り返すことができます。

   for (var i = n-1; i >=0 ; i--) {
     var e = elements[i];
     if ((e.id != divID) && (e.id != xdivID) && (e.id != idParent) && (e.id != idUncle)){
         e.className='hidden';
     }
于 2012-08-10T17:29:50.957 に答える