Javascript:将缩略图替换为原始大小的图像

Question

我对Javascript相当陌生，也就是说，我对Javascript的工作原理有很好的理解。

基本上，我想用代替一个缩略图图像与原始大小的图像点击时(图像的最大宽度显示)。

我能给的最好的例子是https://4chan.org/g/-当你点击一个线程缩略图，它将被替换。

提前感谢。

Answer 1

要做到这一点，您需要使用javascript更改图像源

let thumbnails = document.getElementsByClassName("thumbnail");
for (let i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener("click", function() {
let tempLink = this.src;
this.src = this.getAttribute("data-attribute");
this.setAttribute("data-attribute", tempLink);
});
}

<img class="thumbnail" data-attribute="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/img/favicon144.png" src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/HTML/Element/img/favicon72.png"></img>