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的长度小1，因此抛出错误。）

您可以在IIFE中捕获i的值：

Example Here

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);
}

或者您可以使用.forEach() method：

Example Here

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

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

或者，您可以使用setInterval：

Example Here

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;

编辑：正如Josh在单独的回答中指出的那样，在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并且它没有返回div.inner 如果要选择所有.inner，请尝试此操作改变等级=＆＃34;内部＆＃34;到id =＆＃34;里面＆＃34;并复制这个js

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";}

迭代一系列div

3 个答案: