0

我找到了如何使用 jQuery如何通过单击缩略图来显示/隐藏大图像的答案？，但我想知道如何只用 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。

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

4

2 回答 2

2

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<=8。

于 2013-08-14T14:41:52.633 回答
0

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
}
于 2013-08-14T14:40:55.583 回答