Question

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

在我的一个页面上，我有多个Colorbox幻灯片，其中有一个具有唯一ID值的DIV作为父级，请参阅下面的代码以获得精简的示例。

当＃display_59＆gt;时，我怎样才能最好地编写代码？单击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。）

Answer 1

你可以这样做：

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

Answer 2

Jack's回答非常接近！通过做一些调整我能够让它工作：我用.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}标记对齐。

基于父DIV发射Colorbox幻灯片

2 个答案: