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中的奇怪行爲

回答

相關問題