使用For-Loop爲陣列的所有元素設計

我有一個帶有紅色邊框的div。我希望這個邊框在頁面完成加載後說3秒後消失。這個div裏有3張圖片，我希望它們在同一時間後不透明0.1。我試着用計時器來做這件事，但它不會運行。我能夠讓邊框部分工作，但是當我嘗試執行圖像時，它無法運行，Aptana說for循環出現錯誤。使用For-Loop爲陣列的所有元素設計

function setPlaylist(){ 
    var playlist = document.getElementById('playlist'); 
    var thumbnails = document.getElementsByClassName('thumb').getElementByTagName('img'); 

    for(var i=0,i<thumbnails.length;i++) 
    { 
     thumbnails[i].style.opacity = ('0.1'); 
    } 
    playlist.style.border = ('none'); 
    /*thumbnails.style.opacity = ('0.1');*/ 
} 

function timerPL(){ 
    setTimeout(setPlaylist,3000); 
} 


window.addEventListener('load',timerPL,false);

來源

2013-02-13 Batman

此功能：

document.getElementsByClassName('thumb').getElementByTagName('img'); 
//    ^
//     \_ It's plural. It'll return an array of elements

你需要在它們之間迭代：

var thumbs = document.getElementsByClassName('thumb'); 

for (var i = 0; i < thumbs.length; i++) { 
    var thumb = thumbs[i]; 

    ... 
}

如果你不關心舊的瀏覽器，使用querySelectorAll：

var thumbs = document.querySelectorAll('#playlist .thumb img');

來源

2013-02-13 04:34:06 Blender

所以我必須寫一個var thumb1，var thumb2等f或每個元素？我只有三個圖像，看起來像我可能只是通過ID獲取元素，並且沒有循環就這樣做。 – Batman 2013-02-13 04:37:45

@Batman：您需要將您的原始循環放入我的問題的循環中。或者只是在我的答案結尾處將'getElement ...'調用替換爲'querySelectorAll'，它應該可以工作。 – Blender 2013-02-13 04:38:53

如果我存儲他們全部使用querySelectorAll，會像thumbnails.style.opacity =（'0.1'）;應用於該列表中的所有元素？對不起，這對我來說都是陌生的，試圖找出答案。 – Batman 2013-02-13 04:43:35

使用For-Loop爲陣列的所有元素設計

回答

相關問題