Странное поведение в GetElementsByClassName

Я попытался получить массив изображений для создания простой карусели. Когда я пытаюсь изменить имя класса, чтобы показать или скрыть некоторые элементы мой массив измененными я не знаю, почему ...Странное поведение в GetElementsByClassName

Это моя скрипка https://jsfiddle.net/op1nzkxc/

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="style/style.css"> 
</head> 
<body> 
<div id="my-carousel"> 
    <div> 
     <div class="car-hide">Picture 1</div> 
     <div class="car-hide">Picture 2</div> 
     <div class="car-hide">Picture 3</div> 
    </div> 
</div> 
<script src="js/script.js"></script> 
</body> 
</html>

Javascript :

pictures = []; 

function getAllElementsHided(){ 
    return document.getElementsByClassName("car-hide"); 
} 

function startSlide(){ 
    pictures = getAllElementsHided(); 
    console.log(pictures); 
    pictures[1].className = "car-show"; 
    console.log(pictures); 
} 

startSlide();

CSS:

body{ 
    text-align: center; 
} 

ul{ 
    text-decoration: none; 
} 

.car-hide{ 
    display: none; 
}

Может кто-нибудь помочь мне, пожалуйста?

источник

2015-09-10 Manuel Pavone

Вы могли бы использовать более семантический HTML:

Picture 1
Picture 2
Picture 3

и выберите элементы, не полагаясь на класс. –

.getElementsByClassName возвращает Живая коллекция элементов. Это всегда актуально. Если вы удалите функцию, которая сделала ее подходящей, она больше не будет присутствовать. Если вам нужно сохранить инвариантную коллекцию узлов для более поздней версии, вам необходимо продублировать ее с помощью .slice; Однако, так как живая коллекция не является Array, но массив-подобный объект, мы должны принять Array «s .slice и применять его на живой коллекции:

var pictures = Array.prototype.slice.call(getAllElementsHided())

источник

2015-09-10 00:42:20 Amadan

Намного проще (в данном случае) использовать * querySelectorAll *, поскольку он возвращает статический NodeList по умолчанию: 'document.querySelectorAll ('. Car-hide')'. – RobG

@ RobG: Правда. Казалось, главная проблема в том, «почему он ведет себя так» ... – Amadan

-Да, вы получили мой голос за эту часть. ;-) – RobG

Странное поведение в GetElementsByClassName

ответ

Смежные вопросы