0

インスタンスごとに jQuery コードを複製することなく、1 つのページに異なるコンテンツを持つ複数のライトボックス インスタンスを配置する方法に興味があります。

例は次のとおりです。

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>

上記のコードを、ライトボックス クラスを持つ要素ごとに一意になるようにリファクタリングするにはどうすればよいでしょうか?

4

1 に答える 1

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が 1 つの親にある場合。あなたはそれらを使用することができますindex

jQuery('a').click(function(){
   jQuery('.lightbox:eq('+($(this).index()+1)+')').fadeIn('1000');
   return false;
});
于 2013-06-17T22:16:54.033 に答える