2

名前のリストがあります。これらの名前を1つずつ表示したいと思います。名前はコンテナの上部に表示され、続いて下部に移動してから消えます。その間に、次の名前がコンテナの上部に表示され、移動を開始したはずです...など。

私はまだそうではありません。divを動かすコードを作成する必要があります。これは後で行いますが、そのための別の関数を作成する方が簡単かもしれません。

私はこれを達成しようとしている方法が非常に面倒である可能性が非常に高いことを非常によく理解していますが、私は初心者です...だから私が作ったのは：

function myNamesFunction() {} {

  var y = 0;
  for (y = 0; y < document.getElementById("namelistID").getElementsByTagName('div').length;y++)

 {

 var vinden2 = document.getElementById("namelistID").getElementsByTagName('div')[y];

 {

  var div = document.createElement("div");
  div.innerHTML = (document.getElementById("namelistID").getElementsByTagName('div')[y].innerHTML);

  setTimeout(function () {
    document.getElementById("namecontentbox").appendChild(div)[y];
  }, 0000);
  setTimeout(function () {
    document.getElementById("namecontentbox").removeChild(div)[y];
  }, 2000);


 }

 }

}

HTMLコードは次のとおりです。

<div id="namelistID" style="display: none;">
  <div class="nameofperson">Person1</div>
  <div class="nameofperson">Person2</div>
  <div class="nameofperson">Person3</div>
  <div class="nameofperson">Person4</div>
</div>
<div id="namecontentbox"></div>

問題は、「settimeout」を追加したため、配列の最後の項目のみが作成および削除されたように見えることです。最初の項目から始めて、各項目を表示および非表示にするにはどうすればよいですか？

（続行（または再起動...）する方法に関するその他のアドバイスも大歓迎です）

4

1 に答える 1

2

これは古典的な問題です。これはy、指定した関数が呼び出されるまでに値が変化するためsetTimeoutです。

y古典的な解決策は、ループ内のクロージャーで保護することです。

  for (y = 0; y < document.getElementById("namelistID").getElementsByTagName('div').length;y++) {
    (function(y){
      // use y
    })(y);
  }

この関数は新しいy変数のスコープであり、すぐに実行されるため、yこの時点での値が保護されたままになります。

タイムアウトを次々に実行し、すべてを同時に実行したくない場合は、時間をインクリメントします。

  setTimeout(function () {
    document.getElementById("namecontentbox").removeChild(div)[y];
  }, 2000*(y+1));
于 2013-01-06T15:34:27.663 に答える