javascript - クリック時に画像のz-indexを変更する

Question

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

メイジをクリックすると、z-indexを「9999」にしたい。クリックして別の画像を表示するときに、前の画像のz-indexを「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に設定する前に、charクラス内のすべてのimgのz-indexが0に戻されます。

Answer 2

最後の画像と値を覚えて、古い値を元に戻します。

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'})
});

更新されたフィドル

理想的には、すべてを関数でラップしてグローバル変数を作成しないようにします。

(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'})
    });
})();

さらに更新されたフィドル