Javascript:鼠标通过缩略图，更大的图像Displays..trying来使用'this‘

Question

我正试图在缩略图上按下鼠标，并将该缩略图的较大图像显示在下面。我知道我可以针对每个缩略图单独，但我想使用‘这’，所以我能够应用到任何图像，我添加以后。解释是非常感谢的。谢谢！:)

HTML代码

<div id="gallery">

    <ul>
        <li><a href="images/image1.jpg"><img id="image1" src="images/image1-thumbnail.jpg" alt="#"></a></li>
        <li><a href="images/image2.jpg"><img id="image2" src="images/image2-thumbnail.jpg" alt="#"></a></li>
        <li><a href="images/image3.jpg"><img id="image3" src="images/image3-thumbnail.jpg" alt="#"></a></li>
    </ul>

    <img id="main-image" src="images/image1.jpg" alt="#">

</div>

Javascript代码

我本来就是这么做的。我给出了一个“图像”和“数据”类--每个锚标记(这不是在上面的HTML代码中编写的)，但它只应用于一个缩略图(无论用哪个数字替换，我也不知道如何添加更多的数字)，但我认为实现我想要做的事情的最好方法是使用'this‘，我不知道如何使用它。

var image = document.getElementsByClassName('image')[0];
var mainImage = document.getElementById('main-image');

image.onmouseover = function () {
    mainImage.src = image.getAttribute('data-mainimage');
    mainImage.alt = image.alt;
};

Answer 1

var image = document.getElementsByClassName('image');
var mainImage = document.getElementById('main-image'); 

[].forEach.call(image,function(img){ 
    img.onmouseover = function(){
         mainImage.src = img.parentNode.href; 
     };
});

getElementsByClassName返回一组元素，因此必须对它们进行迭代。