javascript - 单击时更改图像的 z-index

Question

我已经尝试了很多东西，但没有任何效果。

当我点击一个法师时，我希望它的 z-index 为“9999”。当我点击显示另一张图片时，我希望前一张图片的 z-index 回到“0”。

所以基本上，我只希望一次显示一个图像 - 我希望为每个图像运行一个特定的功能。

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

请帮我！

Answer 1

将您的 JavaScript 更改为：

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

这会将 char 类中的所有 imgs 的 z-index 设置回 0，然后将单击的那个设置为 9999。

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

进一步更新的小提琴