2

我有一份名单；我想一一显示这些名字。该名称应该出现在容器的顶部，然后移至底部，然后消失。同时，下一个名字应该出现在容器的顶部，开始移动，......等等。

我还不是那样：我仍然需要创建使 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。

如果您希望一个接一个地执行超时，而不是同时执行，请增加 time ：

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