GetElementsByClassName中的奇怪行为

我试图获取一组图片来创建一个简单的轮播。当我试图改变类名来显示或隐藏某些元素我的数组被修改，我不知道为什么......GetElementsByClassName中的奇怪行为

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的.slice并将其应用在现场收集：

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

来源

2015-09-10 00:42:20 Amadan

更简单（在这种情况下）使用* querySelectorAll *，因为它返回一个静态的NodeList，默认为：'document.querySelectorAll（'。car-hide'）'。 – RobG

@RobG：对。似乎这个问题的主要目标是“为什么它的行为如此”...... – Amadan

-yes，你得到了我对该部分的投票。 ;-) – RobG

GetElementsByClassName中的奇怪行为

回答

相关问题