爲什麼不同的燈箱鏈接總是打開相同的內容？

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。

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