不改變HTML代碼

Question

圖像加載的自動更新我有一個包含照片的網頁和下面的HTML代碼：

<table border="0"><tr> 

<td width=20%> 
<div class="thumbnails" align="top"> 

<img onmouseover="document.getElementById('preview').src=document.getElementById('img1').src" 
alt="Image Not Loaded" id="img1" src="images/DC.jpg" /> 

<img onmouseover="document.getElementById('preview').src=document.getElementById('img2').src;" 
id="img2" src="images/motel.jpg" alt="Image Not Loaded"/> 

<img onmouseover="document.getElementById('preview').src=document.getElementById('img3').src" 
id="img3" src="images/nicola.jpg" alt="Image Not Loaded"/> 

</div> 
</td> 

<td width = 80%> 
<div class="preview"><img id="preview"></div> 
</td> 

</tr> 
</table> 

它做什麼，它加載我的圖片在頁面的左側，當我徘徊一方面，它在頁面中間顯示得更大。當我添加新照片時，我添加了一條新線：

<img onmouseover="document.getElementById('preview').src=document.getElementById('img3').src" 
id="img4" src="images/anotherpic.jpg" alt="Image Not Loaded"/> 

這會讓人覺得很累。有沒有一種方法可以編寫我想要的代碼，而無需通過簡單地查看文件夾來指定所有圖片？這樣，我可以簡單地在文件夾中放置一個新的圖像，並在頁面刷新後，我應該看到新的圖片，並且永遠不必觸摸我的html代碼。

Answer 1

您可以選擇父節點'縮略圖'這種情況，然後在添加onmouseover功能的同時循環節點中的所有圖像。

https://jsfiddle.net/z1p8jqoz/

var imgNodes = document.getElementsByClassName('thumbnails').childNodes; 
for(i=0; i<imgNodes.length; i++) { 

    console.log(imgNodes[i].src) 
    var src = imgNodes[i].src 

    function getMouseover(src) { 
     return function(){ 
     document.getElementById('preview').src=src 
     } 
    } 

    imgNodes[i].onmouseover = getMouseover(src) 
}