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

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

我想这样做，当用户点击缩略图时，缩略图的父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>

---

这将在

src

属性包含字符串small的每个图像的

onclick

事件上绑定一个函数，并在单击缩略图时继续更改大图像的源，即父div的同级：

JavaScript/jQuery

---

这将在

src

属性包含字符串small的每个图像的

onclick

事件上绑定一个函数，并在单击缩略图时继续更改大图像的源，即父div的同级：

JavaScript/jQuery

---

您的jQ中似乎有一个额外的

}

。这里带有类“缩略图”的元素是一个DIV。您的html代码对我来说没有多大意义您的jQ中似乎有一个额外的

}

。这里带有类“缩略图”的元素是一个DIV。您的html代码对于meMakes来说没有多大意义！很有道理！

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

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