为什么不同的灯箱链接始终打开相同的内容？

Question

所以，我尝试在灯箱的不同链接中显示不同的内容，但是当我点击时，我只能看到最后一个内容灯箱链接在所有其他链接中打开。我相信重叠其他人。

<div class="servicos lightbox"> 
    <a><h3> BOX ONE </h3></a> 
</div>
<div class="background"></div>
<div class="box">
    <div class="close">
        <h4>X</h4>
    </div>
    <h1> HERE WE SEE 1° CONTENT </h1>
</div>
<div class="servicos lightbox"> 
    <a><h3> BOX TWO </h3></a> 
</div>
<div class="background"></div>
<div class="box">
    <div class="close">
        <h4>X</h4>
    </div>
    <h1> HERE WE SEE 2° CONTENT </h1>
</div>

$(document).ready(function () {
    $('.lightbox').click(function () {
        $('.background, .box').animate({
            'opacity': '.50'
        }, 500, 'linear');
        $('.box').animate({
            'opacity': '1.00'
        }, 500, 'linear');
        $('.background, .box').css('display', 'block');
    });

    $('.close').click(function () {
        $('.background, .box').animate({
            'opacity': '0'
        }, 500, 'linear', function () {
            $('.background, .box').css('display', 'none');
        });;
    });

    $('.background').click(function () {
        $('.background, .box').animate({
            'opacity': '0'
        }, 500, 'linear', function () {
            $('.background, .box').css('display', 'none');
        });;
    });
});

.background {
    display: none;
    position: fixed;
    z-index: 102;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background-image:url(../imagens/bg_litghbox.gif);
    z-index:105;
    overflow: auto;
}
.box {
    position:absolute;
    width: 70%;
    height:auto;
    background-color:#FFFFFF;
    z-index:106;
    padding:14px;
    border-radius:1em;
    -moz-border-radius:1em;
    -webkit-border-radius:1em;
    box-shadow: 2px 2px 2px #333333;
    -moz-box-shadow: 2px 2px 2px #333333;
    -webkit-box-shadow: 2px 2px 2px #333333;
    display:none;
    overflow:auto;
}
.close {
    float:right;
    cursor:pointer;
}

Answer 1

1. 您可以使用.nextUntil获取以下.box和.background，并仅向其应用动画。

2. 或者您可以将它们包装到容器中，然后使用.siblings来获取它们。

3. 如果你没有将不同的背景css应用到每个灯箱，最好只有一个.background，并将其移动到html的最后一个背景

＆＃13;
＆＃13;
$(document).ready(function () {
    $('.lightbox').click(function () {
      // Get all following .box and .background until next .lightbox is met.
      // So we can get the related contents.
      var $targets = $(this).nextUntil('.lightbox', '.box, .background');
        $targets.animate({
            'opacity': '.50'
        }, 500, 'linear')
        
        $targets.filter('.box').animate({
            'opacity': '1.00'
        }, 500, 'linear');
      
        $targets.css('display', 'block');
    });

    $('.close').click(function () {
        $('.background, .box').animate({
            'opacity': '0'
        }, 500, 'linear', function () {
            $('.background, .box').css('display', 'none');
        });;
    });

    $('.background').click(function () {
        $('.background, .box').animate({
            'opacity': '0'
        }, 500, 'linear', function () {
            $('.background, .box').css('display', 'none');
        });;
    });
});
＆＃13;
.background {
    display: none;
    position: fixed;
    z-index: 102;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background-image:url(../imagens/bg_litghbox.gif);
    z-index:105;
    overflow: auto;
}
.box {
    position:absolute;
    width: 70%;
    height:auto;
    background-color:#FFFFFF;
    z-index:106;
    padding:14px;
    border-radius:1em;
    -moz-border-radius:1em;
    -webkit-border-radius:1em;
    box-shadow: 2px 2px 2px #333333;
    -moz-box-shadow: 2px 2px 2px #333333;
    -webkit-box-shadow: 2px 2px 2px #333333;
    display:none;
    overflow:auto;
}
.close {
    float:right;
    cursor:pointer;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="servicos lightbox"> 
    <a><h3> BOX ONE </h3></a> 
</div>
<div class="background"></div>
<div class="box">
    <div class="close">
        <h4>X</h4>
    </div>
    <h1> HERE WE SEE 1° CONTENT </h1>
</div>
<div class="servicos lightbox"> 
    <a><h3> BOX TWO </h3></a> 
</div>
<div class="background"></div>
<div class="box">
    <div class="close">
        <h4>X</h4>
    </div>
    <h1> HERE WE SEE 2° CONTENT </h1>
</div>
＆＃13;
＆＃13;
＆＃13;