Jquery - Jquery - запрос:Включение для каждого набора элементов более чем в 1 div

StackOverflow https://stackoverflow.com/questions/2462321

  •  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 блок и зацикливание внутри него вместо того, чтобы устанавливать его в целом, а затем зацикливать по всем блокам.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top