我做了一个简单的灯箱，它会弹出并显示图像，但是当涉及到PHP时，事情就被连接了。它会打开我所有包含类灯箱的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>
';
}
问题是当我在页面上有超过 1 张图像时，如果单击其中一张图像，将出现一个灯箱，特别是所有图像。我无法让它仅为单击的图像打开灯箱。
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');
});
});
});
您需要
选择特定项目而不是一类项目：
$('.lightbox').click(function(){
$(this).next('.spate').animate({'opacity':'.50'}, 1000 , 'linear').css('display','block');
$(this).next('.box').animate({'opacity':'1.00'}, 1000 , 'linear').css('display','block');
});