javascript - 自动更新图像加载，无需更改 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)
}