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

或者，如果您在父母一方拥有所有index。您可以使用他们的jQuery('a').click(function(){ jQuery('.lightbox:eq('+($(this).index()+1)+')').fadeIn('1000'); return false; });

{{1}}

在单个页面上为多个元素创建多个灯箱？

1 个答案: