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

您可以选择父节点，＆＃39;缩略图＆＃39;这种情况，然后在添加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)
}

无需更改html代码即可自动更新图像加载

1 个答案: