0

这可能是一个相当新手的 jQuery / Colorbox 问题，但我无法找到解决方案。

在我的一个页面上，我有多个Colorbox幻灯片，它们的父级是具有唯一 ID 值的 DIV，请参阅下面的代码以获取精简示例。

我怎样才能最好地编写代码，以便在单击 #display_59 > a.slides_colorbox 时，仅显示该特定幻灯片中的图像？

也就是说，如果用户点击#display_59内的图片，只会显示IMG_3440.jpg和IMG_3441.jpg？

<div id="display_59" class="display">
   <div class="slides_thumbs">
     <a class="slides_colorbox" href="/images/IMG_3440.JPG"><img src="/images/made/public/burns/IMG_3440_thumb.JPG" alt="" width="62" height="62" /></a>
     <a class="slides_colorbox" href="/images/IMG_3441.JPG"><img src="/images/made/public/burns/IMG_3441_thumb.JPG" alt="" width="62" height="62" /></a>
   </div>
</div>

<div id="display_60" class="display">
   <div class="slides_thumbs">
     <a class="slides_colorbox" href="/images/IMG_2444.JPG"><img src="/images/made/public/burns/IMG_2444_thumb.JPG" alt="" width="62" height="62" /></a>
     <a class="slides_colorbox" href="/images/IMG_2445.JPG"><img src="/images/made/public/burns/IMG_2445_thumb.JPG" alt="" width="62" height="62" /></a>
   </div>
</div>

...

为了运行幻灯片，我使用了这条线，它几乎就像它的库存一样。

$(document).ready(function(){
 (".slides_colorbox").colorbox({rel:'slides_colorbox', slideshow:false});
});

正如预期的那样，它将所有四个图像添加到幻灯片中。（对于上下文，每个幻灯片都连接到一个博客条目。由于条目的数量会发生变化，因此会有未知数量的#display_XX DIV。）

4

2 回答 2

1

你可以这样做：

$('.display').each(function(i){
  var groupName = 'group'+i;
  $('.slides_colorbox', this).colorbox({rel:groupName});
});
于 2013-08-24T19:42:53.860 回答
0

杰克的回答太接近了！通过进行一些调整，我能够让它工作：我用 .groupX（用于 group1、group2 等）替换了我的 HTML 中的 .slides_colorbox 并在该类上触发。 

$('.display').each(function(i){   
  var groupName = 'group'+(i+1);
  $("."+groupName).colorbox({rel:groupName});
});

这'group'+(i+1);是因为该页面由 ExpressionEngine 提供支持，我需要添加 +1，因此 groupName 与从零开始的 {count} 标记对齐。

于 2013-08-24T22:08:32.400 回答