jquery multiple lightboxes

Question

私はセクションごとに1つのライトボックスを使用しています。各セクションは、拡張可能なDIV（jquery内）です。それはすべてここに私のhtmlです正常に動作しますが、代わりに同じコードをコピーしてDIVのID番号を変更するのではjQueryのコードする簡単な方法があるかどう思って...

：

<div class="bus-location"> 
<h5 class="accordion" id="section1">Title 2span></span></h5> 
<div class="content"> 
<p>Content here</p> 

<div class="bus-promo"><a id="show-panel" href="#"></a></div><!-- end of .bus-location-promo --> 
<div id="lightbox-panel"> 
<h6>Heading</h6> 
<p>Text goes here</p> 
<p>image below</p> 
<img src="../images/logo.png" /> 
<p align="center"><a id="close-panel" href="#">Close this window</a></p> 
</div><!-- /lightbox-panel --> 
<div id="lightbox"> </div><!-- /lightbox --> 
</div><!-- end of .content --> 
</div><!-- end of .bus-location--> 

<div class="bus-location"> 
<h5 class="accordion" id="section2">Title 2<span></span></h5> 
<div class="content"> 
<p>Content for div 2 here</p> 
<div class="bus-promo"><a id="show-panel-2" href="#"></a></div><!-- end of .bus-location-promo --> 
<div id="lightbox-panel-2"> 
<h6>Promotion 2</h6> 
<p>Text goes here</p> 
<p>image below</p> 
<img src="../images/logo.png" /> 
<p align="center"><a id="close-panel-2" href="#">Close this window</a></p> 
</div><!-- /lightbox-panel --> 
<div id="lightbox-2"> </div><!-- /lightbox --> 
</div><!-- end of .content --> 
</div><!-- end of .bus-location--> 

は、ここに私のJSです：

ここで

$(document).ready(function(){ 
    $("a#show-panel").click(function(){ 
     $("#lightbox, #lightbox-panel").fadeIn(300); 
    }) 
    $("a#close-panel, #lightbox").click(function(){ 
     $("#lightbox, #lightbox-panel").fadeOut(300); 
    }) 

    $("a#show-panel-2").click(function(){ 
     $("#lightbox-2, #lightbox-panel-2").fadeIn(300); 
    }) 
    $("a#close-panel-2, #lightbox-2").click(function(){ 
     $("#lightbox-2, #lightbox-panel-2").fadeOut(300); 
    }) 

    $(document).bind('keydown', function(e) { 
     if (e.which == 27) { 
     $("#lightbox, #lightbox-panel").fadeOut(300); 
     $("#lightbox-2, #lightbox-panel-2").fadeOut(300); 
     } 
    }); 
}) 

は私のCSSです：ここで

#lightbox, #lightbox-2 { 
    display:none; 
    background:#000; 
    opacity:0.9; 
    filter:alpha(opacity=90); 
    position:absolute; 
    top:0px; 
    left:0px; 
    min-width:100%; 
    min-height:100%; 
    z-index:1000; 
} 
#lightbox-panel, #lightbox-panel-2 { 
    display:none; 
    position:fixed; 
    top:100px; 
    left:50%; 
    margin-left:-400px; 
    width:800px; 
    background:#FFF; 
    padding:10px 15px 10px 15px; 
    border:1px solid #CCC; 
    z-index:1001; 
} 

Answer 1

良いクラスターゲティングが必要なようです。これにより、コードを変更したり、IDを追加することなく、無限にライトボックスを作成することができます。

ここJSFiddleです：ここでhttp://jsfiddle.net/3CAhb/

のJavaScript：

$(document).ready(function(){ 
    $("a.show-panel").click(function(){ 
     $(this).closest(".content").find(".lightbox, .lightbox-panel").fadeIn(300); 
    }) 
    $("a.close-panel, .lightbox").click(function(){ 
     $(this).closest(".content").find(".lightbox, .lightbox-panel").fadeOut(300); 
    }) 

    $(document).bind('keydown', function(e) { 
     if (e.which == 27) { 
     $(".lightbox, .lightbox-panel").fadeOut(300); 
     } 
    }); 
}) 

そしてHTML：私は今、それを得る

<div class="bus-location"> 
    <h5 class="accordion">Title 2<span></span></h5> 
    <div class="content"> 
     <p>Content for div 2 here</p> 
     <div class="bus-promo"> 
      <a class="show-panel" href="#"></a> 
     </div> 

     <div class="lightbox-panel"> 
      <h6>Promotion 2</h6> 
      <p>Text goes here</p> 
      <p>image below</p> 
      <img src="../images/logo.png"/> 
      <p align="center"><a class="close-panel" href="#">Close this window</a></p> 
     </div> 

     <div class="lightbox"></div> 
    </div> 
</div> 

Answer 2

が一つの方法です - あなたが旧姓情報をキャプチャdをクリックします。ここで

$("a#show-panel-2").click(function(){ 
    $("#lightbox-2, #lightbox-panel-2").fadeIn(300); 
}); 

私はどうなるのかされ

$('a').click(function() { 
    var array_id = $(this).attr('id').split('-'); // separates the id into parts 
    var number_from_id = array_id[array_id.length - 1]; // gets last element of the array 
    $('#lightbox-' + number_from_array, '#lightbox-panel-' + number_from_array).fadeIn(300); 
    // and so on 

}）;：ここにあなたのコードがあります

少し組織化されますが、コードブロックを何度も繰り返し入力する必要はありません。