jQueryが前面に画像を表示しない

Question

私は、クリックすると、画像を前面に（Z-インデックス経由で）持ち込み、クリックした画像のサイズを大きくしようとしています。私のコードは動作していないようです。誰かがそれを動作させるために編集を提案できますか？

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-Iを有している画像を見ndex、なぜすべてのZ-インデックス（インデックス？）をリセットせず、クリックされたイメージの1つだけを変更するのはなぜですか？

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

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