JQuery: incriminação para cada conjunto de elementos em mais de 1 div
-
20-09-2019 - |
Pergunta
Estou fazendo uma apresentação de slides jQuery. Ele lista as miniaturas, que, quando clicadas, revelam a imagem grande como uma sobreposição. Para combinar os polegares com as imagens grandes, estou adicionando atributos a cada miniatura e imagem grande. Os atributos contêm um número que corresponde a cada polegar à sua imagem grande correspondente. Funciona quando uma apresentação de slides está presente em uma página. Mas quero que funcione se mais de uma apresentação de slides estiver presente.
Aqui está o código para adicionar atributos aos polegares e imagens grandes:
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);
});
Isso funciona. Para fazer a incremento funcionar quando houver duas apresentações de slides em uma página, pensei em colocar esse código em uma função ...
$('.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);
});
});
O problema com isso é que o operador de incorporação não é redefinido para a segunda apresentação de slides Div (.Slideshow), então acabo com os polegares na primeira divisão .Slideshow sendo numerada 1,2,3 etc. e polegares no segundo. Div da apresentação de slides sendo numerada 4,5,6 etc. Como faço os números no segundo .Slideshow div reset e comece de 1 novamente?
Isso é realmente difícil de explicar de forma concisa. Espero que alguém seja a essência.
Solução
Em cada um deles, desça um nível, verifique se está escopo para cada apresentação de slides como esta:
$('.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++);
});
});
Isso os define para 0 dentro de cada .slideshow_content
Bloqueie e bloqueie dentro dele, em vez de configurá -lo em geral e, em seguida, entre todos os blocos.