不改变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) 
}