点击显示大图

Question

嗨，关于这个问题有很多话题，但我仍然无法弄清楚我的例子。 我在/ 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>
...

也许我需要一些代码来检查它的数量是多少，然后将该数字用于图像。如果有人能提供帮助，我将非常感激

Answer 1

使用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');