Question

我找到了关于如何用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。

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

Answer 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>使用一个。此示例假定thumbs-container上的<ol>类：

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

请注意，我的代码示例需要进行一些调整才能跨浏览器工作，特别是对于IE＆lt; = 8。

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

使用Javascript而不是jQuery点击缩略图后如何显示图片？

2 个答案: