Итерация через массив divs

Question

Я все еще новичок в javascript. Я изучаю концепции в течение нескольких месяцев, и это мой первый раз, когда он взламывает.

Im пытается создать карусель с помощью CSS3 и Javascript (Jquery) не

консоль продолжает бросать ошибку.

Uncaught TypeError: Cannot read property display of undefined

Ниже мой HTML и код

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 в IIFE:

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

Javascript У вас есть display и style в неправильном порядке.

Это должно быть slideShow[i].style.display='inline-block';

Кроме того, slideShow только массив типа объекта длиной 1: она содержит Див .inner, но не своих детей. Если вы хотите, чтобы перебирать дочерние элементы, используйте

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

редактирование: Как Джош указал в отдельный ответ, у вас есть еще одна проблема, а в использовании 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 класс изменение = «внутри», чтобы ид = «внутри» и скопировать этот 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";}