jQuery Bring Bild nach vorne funktioniert nicht

Question

Ich versuche, auf Klick, um ein Bild an die Front (über Z-Index) zu bringen und die Größe des angeklickten Bildes zu erhöhen. Mein Code scheint nicht zu funktionieren. Kann jemand bitte einen Schnitt vorschlagen, damit es funktioniert?

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

Anstatt nach dem Bild hat die höchste Z-i ndex, warum nicht alle z-indexes (indizes?) zurücksetzen und nur die des angeklickten Bildes ändern?

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

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