javascript - 为单个页面上的多个元素创建多个灯箱？

Question

我很好奇如何在一个页面上拥有多个具有不同内容的灯箱实例，而不必为每个实例复制 jQuery 代码？

示例如下：

jQuery

jQuery('a').click(function(){
      jQuery('.lightbox').fadeIn('1000');
      return false;
});

HTML

<div id="unique-lightbox-1" class="lightbox">
<p>Unique content for unique lightbox 1.</p>
</div>
<div id="unique-lightbox-2" class="lightbox">
<p>Unique content for unique lightbox 2.</p>
</div>
<div id="unique-lightbox-3" class="lightbox">
<p>Unique content for unique lightbox 3.</p>
</div>

我如何将上面的代码重新分解为对于具有灯箱类的每个元素都是唯一的？

Answer 1

例如，您可以通过将lightbox id其a存储在data

<a href='#' data-light='1'>Lightbox 1</a>
<a href='#' data-light='2'>Lightbox 2</a>
<a href='#' data-light='3'>Lightbox 3</a>

你进入data你的script

jQuery('a').click(function(){
   jQuery('#unique-lightbox-' + $(this).data('light')).fadeIn('1000');
   return false;
});

或者，如果您拥有所有的a父母。你可以使用他们的index

jQuery('a').click(function(){
   jQuery('.lightbox:eq('+($(this).index()+1)+')').fadeIn('1000');
   return false;
});