jquery多個燈箱

Question

我使用的是每段1燈箱。每個部分是一個可擴展的DIV（在jQuery中）。這一切工作正常，但不知道是否有更簡單的方法jQuery中的代碼，而不是複製相同的代碼，並改變DIV ID號...

，這裏是我的html：

<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 

}）;

它需要一點重新組織，但會阻止您不得不一遍又一遍地鍵入代碼塊。