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

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

这将在每个属性包含字符串smallonclick的图像的事件上绑定一个函数，并在单击缩略图时继续更改大图像的源，父 div 的兄弟：src

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'));
        });
    }
});

现场演示