Javascript-单击或滚动时交换图像

我知道如何在jquery中实现这一点，但我正试图用纯老式javascript实现以下内容。有人能帮忙吗

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

---

我的最终目标是单击缩略图并更改主图像，但我需要使用javascript（无jquery）进行更改。我知道这听起来很简单，但我无法理解。谢谢。

活动委派可能是最简单的方式：

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
        });
    });
}

---

如果我理解正确，您将显示一个关联图像的缩略图，比如说“1thumb.png”，比如说“1.png”，当您单击此缩略图时，您希望更改主图像的src属性，比如id='mainimg'，以显示与缩略图关联的“1.png”图像，而不是它显示的任何内容。我试过这个，效果很好：

在您的

中：

函数myHandler（源）{
document.getElementById（'mainimg'）.src=source；
}
...

您的缩略图代码：

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

或者，对于翻滚触发：

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

---

检查一下：

jQuery自动给您提供了很多东西，因此很难给您一个答案来完成jQuery代码所做的一切。下面是一个简单的示例，它将查找每个具有

缩略图

类的图像，并将其

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;
    }
};

---

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

@user982853:您能否更具体地说明哪些内容不起作用？有错误吗？对不起，没有错误，但当我单击拇指时，它没有插入主数据。@user982853:您正在调用

stopPropagation（）

其他任何地方吗？是否有方法内联执行此操作？而不是函数。@user982853:是的，但它涉及代码复制，所以不要这样做。这是真的，但在这种情况下，这样做非常简单。更少的代码，更少的麻烦，对吗？不太可能。整个前提意味着这里有多个图像。如果您更改了大型图像容器的ID，该怎么办？您必须在每个处理程序中更改它。这并不漂亮，也不能很好地分开（多个处理程序，任何人？）

javascript:

不属于

on*

属性，只属于

href

s。

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;
    }
};

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;
    }
};