遍历div数组

Question

我在javascript还是个新手，我已经学了几个月的概念了，这是我第一次尝试。

我试图使用css3和Javascript创建一个旋转木马(没有Jquery)

控制台一直抛出一个错误。

未定义的TypeError:无法读取未定义的属性display

以下是我的html和javascript代码

​

var slideShow = document.querySelectorAll('.inside');

for (var i = 0; i < slideShow.length; i++) {
  setTimeout(function() {
    slideShow[i].display.style = 'inline-block';
  }, 2000)
}

<div class="inside">
  <div class="inner1">
    <h1>This is Inner div 1</h1>
  </div>
  <div class="inner2">
    <h1>This is Inner div2</h1>
  </div>
  <div class="inner3">
    <h1>This is Inner div3</h1>
  </div>
  <div class="inner4">
    <h1>This is Inner div4</h1>
  </div>
</div>

​

Answer 1

除了display和style处于错误的顺序之外，问题是在执行setTimeout回调函数时，for循环已经结束，i等于nodeList的长度(因为最后一个元素的索引比nodeList的长度少一个，就会抛出一个错误)。

您可以在i中捕获生平的值。

这里的例子

var slideShow = document.querySelectorAll('.inside');

for (var i = 0; i < slideShow.length; i++) {
  (function (i) {
    setTimeout(function () {
      slideShow[i].style.display = 'inline-block';
    }, 2000 * (i + 1));
  })(i);
}

或者你可以用方法

这里的例子

var slideShow = document.querySelectorAll('.inside');

Array.prototype.forEach.call(slideShow, function (el, i) {
  setTimeout(function () {
    el.style.display = 'inline-block';
  }, 2000 * (i + 1));
});

或者，您可以只使用setInterval

这里的例子

var slideShow = document.querySelectorAll('.inside');
var i = 0;
var interval = setInterval(function () {
  if (i < slideShow.length) {
    slideShow[i].style.display = 'inline-block';
    i++;
  } else {
    clearInterval(interval);
  }
}, 2000);

Answer 2

display和style的顺序不对。

应该是slideShow[i].style.display='inline-block';

此外，slideShow只是一个长度为1的类似数组的对象:它包含div .inner，而不是它的子对象。如果要迭代子元素，请使用

var slideShow = document.querySelector('.inside').children;

编辑:正如乔希在一个单独的答案中指出的那样，在for循环中使用setTimeout还有另一个问题。当超时内的函数执行时，i将为4，这将给出一个未定义的值。

如果坚持使用for循环，也可以使用forEach方法。然而，slideShow在技术上不是一个数组，而是一个“类似数组的对象”，因此它没有自己的forEach方法。相反，您必须以这样的方式调用Array.prototype方法：

[].forEach.call(slideShow, function(item) {
    setTimeout(function() {
        item.style.display = 'inline-block';
    }, 2000);
});

Answer 3

问题是，您只选择div.inside，如果您希望选择所有.inner change class=“it”to id=it并复制此js，则不返回div.inner，请尝试此操作。

var slideShow=document.getElementById("inside").querySelectorAll('div');
slideShow[1].style.backgroundColor  = "red";
for (var i=0; i<slideShow.length; i++){

    setTimeout(myFun(i), 2000)

}

function myFun(i ){slideShow[i].style.display  = "inline-block";}