クリック時に画像のZ-インデックスを変更する

Question

私はたくさんのことを試みましたが、何も機能していません。

私がメイジをクリックすると、Z-indexが "9999"になります。私が別の画像を表示するためにクリックすると、前の画像のZ-インデックスを "0"に戻したい。

基本的に、私は一度に1つの画像しか表示しません - それぞれの画像に対して特定の機能を実行します。

http://jsfiddle.net/WarrenBee/a78R7/

私を助けてください！

Answer 1

これにあなたのJavaScriptを変更し

：

$('.char').click(function() { 
    $('.char img').css({'z-index' : '0'}); 
    $(this).children('img').css({'z-index' : '9999'}); 
}); 

これはちょうど9999

Answer 2

にクリックされたものを設定する前に、バック0に文字クラス内のすべてのIMGSのzインデックスを設定します最後の画像と値を覚えていて、背中の古い値を置く：

var lastImage, lastZIndex; 
$('.char').click(function() { 
    var thisImage = $(this).children('img'); 
    if (lastImage) { 
     lastImage.css('z-index', lastZIndex); 
    } 
    lastImage = thisImage; 
    lastZIndex = thisImage.css('z-index'); 
    thisImage.css({'z-index' : '9999'}) 
}); 

Updated fiddle

理想的には、関数内でそのすべてを包むことにより、グローバル変数を作成しないよう：

(function() { 
    var lastImage, lastZIndex; 
    $('.char').click(function() { 
     var thisImage = $(this).children('img'); 
     if (lastImage) { 
      lastImage.css('z-index', lastZIndex); 
     } 
     lastImage = thisImage; 
     lastZIndex = thisImage.css('z-index'); 
     thisImage.css({'z-index' : '9999'}) 
    }); 
})(); 

Further updated fiddle