0

我正在制作一个 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 中的 thumbs 编号为 1,2,3 等。而第二个 .slideshow div 中的 thumbs 。幻灯片 div 编号为 4、5、6 等。如何使第二个 .slideshow div 中的数字重置并再次从 1 开始？

这真的很难简明扼要地解释。我希望有人能明白要点。

4

1 回答 1

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 并在其中循环，而不是整体设置然后循环遍历所有块。

于 2010-03-17T13:04:44.947 回答