Question

我正在制作一个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等。并且拇指在第二个.slideshow div编号为4,5,6等。如何在第二个.slideshow div重置并从1开始重新编号？

这很难简洁地解释。我希望有人得到主旨。

Answer 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++);
    });
});

这会将它们设置为每个.slideshow_content块内的0并在其内部循环，而不是整体设置它，然后循环遍历所有块。

Jquery：超过1个div中每组元素的入侵

1 个答案: