javascript - Javascript - 单击或翻转时交换图像

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/