如何在使用 Javascript 而不是 jQuery 单击缩略图后显示图片？答案

【问题标题】：How to show a picture after clicking the thumbnail using Javascript not jQuery?如何在使用 Javascript 而不是 jQuery 单击缩略图后显示图片？
【发布时间】：2013-08-14 14:21:48
【问题描述】：

我找到了如何用 jQuery How to show/hide big image by clicking on thumbnails? 做同样事情的答案，但我想知道如何只用 Javascript 做同样的事情。

在 jQuery 中你可以使用 $(this) 来指定你点击的图片应该变成更大的图片，但是没有 jQuery 有没有等价物？

HTML

<ol>
    <li class="thumbs">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__02.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__03.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__04.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__05.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__06.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__07.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__08.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__09.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__10.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__11.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__12.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__13.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__14.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__15.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__16.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__17.jpg" alt="">
    </li>
    <li class="thumbs">
        <img src="images/thumbnails/t__18.jpg" alt="">
    </li>
</ol>
<div id="gallery"><img src="images/thumbnails/t__01.jpg" alt="">
</div>

我在想我可以只使用 CSS 将 li 图像链接到图像 id，但这意味着如果我按下返回，那么它将返回到上一个图像而不是上一个页面。

一种方法可能是在每张图片上使用。然后 changeImage() 会将当前较大的图像更改为单击的图像。如果拇指在活动图像中单击，则不会发生任何事情。否则将#gallery img src 更改为单击的拇指的src。

我不知道如何将其转换为代码。谢谢

【问题讨论】：

是的，只是this。请添加更多详细信息，例如您已经尝试过的标记和代码，然后我们可以为您提供更具体的建议。
在帖子中添加了详细信息
如果你不想使用 jQuery，为什么要用它来标记你的问题？

标签： javascript photo-gallery

【解决方案1】：

vanilla-js 版本与 jQuery 版本没有太大区别。如果您使用addEventListener 添加点击侦听器，则被点击的元素将以this 的形式提供：

var large = document.getElementById('gallery').firstChild;
// another option:
// var large = document.querySelector('#gallery img');

var thumbs = document.getElementsByClassName('thumbs');
// another option:
// var thumbs = document.querySelectorAll('.thumbs');

for(var i=0; i<thumbs.length; i++) {
    thumbs[i].addEventListener('click', function(e){
        large.src = this.getElementsByTagName('img')[0].src;
    }, false);
}

您可以在 <ol> 上使用单个事件处理程序，而不是每个 <li> 一个。此示例假定 <ol> 上有一个 thumbs-container 类：

var container = document.querySelector('.thumbs-container');
container.addEventListener('click', function(e){
    large.src = e.target.src;
}, false);

请注意，我的代码示例需要一些调整才能跨浏览器工作，尤其是对于 IE

【讨论】：

值得注意的是 getElementsByClassName() 有兼容性问题quirksmode.org/dom/w3c_core
@Zachdev 是的，如果您决定不使用任何库，则必须自己处理跨浏览器问题。（你在我添加最后一句话之前写了那条评论吗？）。
我添加了在

【解决方案2】：

为您的每个 li 标签附加一个唯一的 ID。

<li class="thumbs" id="unique1" onclick="function_name(this.id)">
        <img src="images/thumbnails/t__01.jpg" alt="">
    </li>

这里是javascript代码

function function_name(test_id){
    var _img = document.getElementById("test_id");
    //code to show the corresponding image
}

【讨论】：