Question

我尝试了很多东西，但没有任何工作。

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

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

请帮助我！

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

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

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

2 个答案: