Jquery 单击“显示大图像”

嗨，有很多关于这个的话题，但我还是不能把它作为我的例子。 我在/thumbnails文件夹中有缩略图，在/image文件夹中有大图像，它们的编号都在1-50之间。当我点击特定的缩略图时，我希望屏幕上显示的数字相同的大图像（这是我的主要问题） 我的html代码如下所示：

<div class="thumbnail-box"><img src="thumbs/1.jpg" class="thumbs"></div>
<div class="thumbnail-box"><img src="thumbs/2.jpg" class="thumbs"></div>
<div class="thumbnail-box"><img src="thumbs/3.jpg" class="thumbs"></div>
...

...

---

也许我需要一些if代码来检查它是哪一个thumnail号码，然后用这个号码生成一张图片。如果有人能帮助我，我将非常感激

使用

attr

更新图像的

src

属性

$('.thumbnail-box').on('click', function() {
    $(this).attr('src', $(this).attr('src').replace('thumbs', 'image'));
});

这将把图像

src

从

thumbs/1.jpg

更改为

image/1.jpg

您可能还想删除类：

$(this).removeClass('thumbnail-box');

---

这将仅替换图片的缩略图。但我实际上需要打开一个新的div，里面有放大的图片。也许如果我给每一张照片不同的“id”会更容易吗？