на click display большое изображение

Question

Привет, есть много тем об этом, но я все еще не могу понять это для моего примера. У меня есть миниатюры в папке/миниатюр и большие изображения в папке/images, все пронумерованы от 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> 
... 

Может быть, мне нужно некоторые, если код, чтобы проверить, какой номер thumnail это, а затем использовать это число для изображения. Если кто-то может помочь, я буду действительно благодарен

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