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

这是一种方法 - 从点击中捕获您需要的信息。这是你的代码：

$("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

}）;

需要稍微重新组织，但会阻止您不得不一遍又一遍地键入代码块。

Answer 2

看起来你需要一些好的课程定位。有了这个，您可以无限制地创建灯箱，而无需更改代码或添加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>

jquery多个灯箱

2 个答案: