Javascript Jquery将显示页面上的所有灯箱

我制作了一个简单的Lightbox，它会弹出，图像也会显示出来，但是当涉及到PHP的时候，它会打开所有包含Lightbox类的div

Javascript:

$('.lightbox').click(function(){
$('.spate').animate({'opacity':'.50'}, 1000 , 'linear');
$('.box').animate({'opacity':'1.00'}, 1000 , 'linear');
$('.spate, .box').css('display','block');
});
$('.inchide').click(function(){
$('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$('.spate, .box').css('display','none');
});  
});
$('.spate').click(function(){
$('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
$('.spate, .box').css('display','none');
});
});

PHP/HTML：

while($row=mysql_fetch_array($query){
$post_image= $row['post_image'];
<?php if(!$post_image=="") echo '
<a class="lightbox" href="#"><img src="img/'.$post_image.'"></a>
<div class="spate"></div>
<div class="box"><div class="inchide">X</div> <img src="img/'.$post_image.'"></div>
';
}

while（$row=mysql\u fetch\u数组（$query）{
$post_image=$row['post_image']；
您需要选择特定项目，而不是一类项目：

$（'.lightbox'）。单击（函数（）{
$（this）.next（'.spate'）.animate（{'opacity'：'.50'}，1000，'linear'）.css（'display'，'block'）；
$（this）.next（'.box'）.animate（{'opacity'：'1.00'}，1000，'linear'）.css（'display'，'block'）；
})
Thx我忘了我的页面上有不止一个类，因为PHP创建了一个循环。@camin10不介意我们有时总是这样做：）…祝你好运
while($row=mysql_fetch_array($query){
$post_image= $row['post_image'];
<?php if(!$post_image=="") echo '
<div> <!--add all of that in div for each one-->
<a class="lightbox" href="#"><img src="img/'.$post_image.'"></a>
<div class="spate"></div>
<div class="box"><div class="inchide">X</div> <img src="img/'.$post_image.'"></div>
<div>
';
}

$(document).ready(function(){
    $('.lightbox').click(function(){
    $(this).parent().find('.spate').animate({'opacity':'.50'}, 1000 , 'linear');
    $(this).parent().find('.box').animate({'opacity':'1.00'}, 1000 , 'linear');
    $(this).parent().find('.spate, .box').css('display','block');
    });
    $('.inchide').click(function(){
    $(this).parent().parent().find('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
    $(this).parent().parent().find('.spate, .box').css('display','none');
    });  
    });
    $('.spate').click(function(){
    $(this).parent().find('.spate, .box').animate({'opacity':'.0'}, 500 , 'linear', function(){
    $(this).parent().find('.spate, .box').css('display','none');
    });
    });
});