Question

我知道如何在jquery中执行此操作但我正在尝试在纯粹的旧学校javascript中执行以下操作。有人可以提供帮助：

$(".thumbnail").click(function() {
    $("#mainImage").attr("src", $(this).attr("src"));
});

我的最终目标是点击缩略图并让主图像发生变化，但我需要在javascript（没有jquery）中进行。我知道这听起来很简单，但我无法理解。谢谢。

Answer 1

jQuery会自动提供很多东西，很难给你一个能够完成你的jQuery代码所做的一切的答案。这是一个简单的示例，它将查找具有thumbnail类的每个图像，并将其onclick属性设置为执行图像交换的事件处理程序。

onload = function () {
    var bigImg = document.getElementById("mainImage");
    for (var i = 0; i < document.images.length; i++) {
        var img = document.images[i];
        if (/\bthumbnail\b/.test(img.className) {
            img.onclick = thumbnailHandler;
        }
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

如果您不必支持IE7，可以使用document.querySelectorAll()稍微简化一下：

onload = function () {
    var bigImg = document.getElementById("mainImage");
    var thumbs = document.querySelectorAll(".thumbnail");
    for (var i = 0; i < thumbs.length; i++) {
        thumbs[i].onclick = thumbnailHandler;
    }
    function thumbnailHandler(e) {
        bigImg.src = this.src;
    }
};

顺便说一句，我不明白为什么要将主图像的源设置为缩略图的来源。您是否将完整图像加载到缩略图中？这可以下载很多，并且可以快速增加页面的内存占用量。

Answer 2

事件委托可能是最简单的方法：

function expandThumbnail(e) {
    if(~(' ' + e.target.className + ' ').indexOf(' thumbnail ')) {
        document.getElementById('mainImage').src = e.target.src;
    }
}

if(document.addEventListener) {
    document.addEventListener('click', expandThumbnail, false);
} else {
    document.attachEvent('onclick', function() {
        expandThumbnail({
            target: event.srcElement
        });
    });
}

Answer 3

如果我理解正确，你会显示一个相关图像的缩略图，比如'1thumb.png'，比如'1.png'，当你点击这个缩略图时你想要改变src属性例如，使用id ='mainimg'来显示与缩略图相关联的'1.png'图像而不是显示的任何图像。我试过这个并且它有效：

在<header>内：

<script type='text/javascript'>
function myHandler(source){
    document.getElementById('mainimg').src=source;
}
</script>
...

您的缩略图代码：

<img src='1thumb.png' onclick="myHandler('1.png')"/>

或者，对于翻转触发：

<img src='1thumb.png' onmouseover="myHandler('1.png')"/>

检查出来：http://jsfiddle.net/d7Q27/7/

Javascript - 点击或翻转时交换图片

3 个答案: