Jquery - Jquery - запрос:Включение для каждого набора элементов более чем в 1 div
-
20-09-2019 - |
Вопрос
Я создаю слайд-шоу на Jquery.В нем перечислены миниатюры, при нажатии на которые большое изображение отображается в виде наложения.Чтобы сопоставить большие пальцы с большими изображениями, я добавляю атрибуты к каждой миниатюре и большому изображению.Атрибуты содержат число, которое соответствует каждому большому пальцу и соответствующему ему большому изображению.Это работает, когда на странице присутствует одно слайд-шоу.Но я хочу, чтобы это сработало, если присутствует более одного слайд-шоу.
Вот код для добавления атрибутов к большим пальцам и большим изображениям:
thumbNo = 0;
largeNo = 0;
$('.slideshow_content .thumbs img').each(function() {
thumbNo++;
$(this).attr('thumbimage', thumbNo);
$(this).attr("title", "Enter image gallery");
});
$('.slideshow_content .image_container .holder img').each(function() {
largeNo++;
$(this).addClass('largeImage' + largeNo);
});
Это работает.Чтобы приращение работало при наличии двух слайд-шоу на странице, я подумал, что мог бы вставить этот код в каждую функцию...
$('.slideshow').each(function() {
thumbNo = 0;
largeNo = 0;
$(this + '.slideshow_content .thumbs img').each(function() {
thumbNo++;
$(this).attr('thumbimage', thumbNo);
$(this).attr("title", "Enter image gallery");
});
$(this + '.slideshow_content .image_container .holder img').each(function() {
largeNo++;
$(this).addClass('largeImage' + largeNo);
});
});
Проблема с этим заключается в том, что вводящий оператор не выполняет сброс для второго слайд-шоу div (.slideshow), поэтому в итоге я получаю большие пальцы в первом .slideshow div с номерами 1,2,3 и т.д..и большие пальцы во втором .слайд-шоу div пронумерованы 4,5,6 и т.д.Как мне сбросить цифры во втором разделе .slideshow и снова начать с 1?
Это действительно трудно объяснить кратко.Я надеюсь, что кто-нибудь уловит суть.
Решение
В вашем каждом, спуститесь на уровень ниже, убедитесь, что он ограничен для каждого слайд-шоу, подобного этому:
$('.slideshow_content').each(function() {
thumbNo = 0;
largeNo = 0;
$(this).find('.thumbs img').each(function() {
$(this).attr('thumbimage', thumbNo++);
$(this).attr("title", "Enter image gallery");
});
$(this).find('.image_container .holder img').each(function() {
$(this).addClass('largeImage' + largeNo++);
});
});
Это устанавливает их равными 0 внутри каждого .slideshow_content
блок и зацикливание внутри него вместо того, чтобы устанавливать его в целом, а затем зацикливать по всем блокам.