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

Question

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

<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

您可以使用.nextUntil得到以下.box和.background并且只对它们应用动画。
或者你可以把它们包在一个容器里，然后用.siblings得到它们。
最好只有一个 .background，然后将它移到 html 的最后一个，如果你不应用不同的背景 css到每个灯箱的背景。

$(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');
        });;
    });
});

.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;
}

<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>

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

Why different lightbox links are opening always the same content?

html

javascript

css

jquery

lightbox