Question

我试图在点击时将图像带到前面（通过z-index）并增加点击图像的大小。我的代码似乎不起作用。有人可以建议编辑以使其正常工作吗？

HTML

<div class="container">
<div class="click-to-top first"><img src="img/cherry.png" alt="Cherry"  class="cherry" /></div>
<div class="click-to-top"><img src="img/lemon.png" alt="Lemon" class="lemon" /></div>
<div class="click-to-top last"><img src="img/apple.png" alt="Apple" class="apple" /></div>
</div>

JS

$('.click-to-top').click(function(){
var topZ = 0;
$('.click-to-top').each(function(){
    var thisZ = parseInt($(this).css('z-index'), 10);
    if (thisZ > topZ){
        topZ = thisZ;
    }
});
$(this).css('z-index', topZ+3);
});

CSS

.container{
max-width:600px;
margin:0 auto;
}

div.click-to-top {
display:inline-block;
position:relative;
max-width:160px;
}

div.click-to-top.last,div.click-to-top.first{
z-index:-1;
}

div.click-to-top img{
max-width:160px;
margin:0 30px;
}

Answer 1

为什么不重置所有z-index（索引？）而不是查看哪个图像具有最高的Z-index，而只是更改被点击的图像？

$('.click-to-top').click(function(){

    $('.click-to-top').css('z-index', 1);
    $(this).css('z-index', 2);
});

jQuery使图像无法正常工作

1 个答案: