Question

我正在尝试鼠标悬停缩略图图像，并在下方显示该缩略图的较大图像。我知道我可以单独定位每个缩略图，但我想使用'this'，因此我可以将代码应用于我稍后添加的任何图像。非常感谢解释。谢谢！：）

HTML CODE

<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代码中写的），但它只将更改应用于一个缩略图（无论我用[0]替换[0]的数字，和我不知道如何添加更多数字），但我相信实现我想做的最好的方法是使用'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返回一组元素，因此你必须迭代它们。

Javascript：鼠标悬停缩略图，更大的图像显示......正在使用＆＃39;这个＆＃39;

1 个答案: