单击缩略图时更改图像，一页上有多个实例

Question

我正在尝试创建一个页面，其中包含多个缩略图较小的大图像实例。

我想这样做，以便当用户点击缩略图的父div中的大图像到缩略图的大版本时。

如果页面上只有一个这样的实例，我知道如何实现这一点，但我遇到了多个实例的问题。

这是我到目前为止的代码：

HTML

<div>
<img src="upload/1374000286_large.jpg" />
    <div class="thumbnails" >
        <img src="upload/1374000286_small.jpg" />
        <img src="upload/1374000773_small.jpg" />
    </div>
</div>

JQuery的

$('.thumbnails').click(function(){
    $(this).attr('src',$(this).attr('src').replace('small','large'));
    })
});

Answer 1

这将绑定每个图像onclick事件的函数，src属性包含字符串小，然后继续更改大图像< / strong>来源，父div的兄弟，点击缩略图时：

的JavaScript / jQuery的

$.each($('img'), function () {
    if ($(this).attr('src').toString().indexOf('small.jpg') > -1) {
        $(this).on('click', function () {
            console.log("test");
            $(this).parent('div').siblings('img').attr('src', $(this).attr('src').replace('small', 'large'));
        });
    }
});

Live Demo