jQuery 和 Z 索引重置

Question

我有 5 个 div 框，每个都有一个 z-index 分数。

div1 - z-index: 0

div2 - z-index: -1

div3 - z-index: -2

div4 - z-index: -3

div5 - z-index: -4

div6 - z-index: -5

我想使用 jQuery 来更改点击时的 z 索引。比如：

$("#div2").click(function () {
    $("#div1").css("z-index","0");
    $("#div3").css("z-index","-2");
    $("#div4").css("z-index","-3");
    $("#div5").css("z-index","-4");
    $("#div6").css("z-index","-5");

    $("#div2").css("z-index","1");

}); 

这显然会将我的 div2 框放在所有其他框的前面。

现在，如果我想去另一个盒子，我必须执行以下操作：

$("#div3").click(function () {
    $("#div1").css("z-index","0");
    $("#div2").css("z-index","-1");
    $("#div4").css("z-index","-2");
    $("#div5").css("z-index","-4");
    $("#div6").css("z-index","-5");

    $("#div3").css("z-index","1");

});

我必须定义原始值，然后重新定义我想列出的最高的框。有没有办法将它们重置回它们的第一个值，所以希望我可以避免一些重置？我希望它看起来像这样：

$("#div3").click(function () {
    $("div").css("original css z-index values");

    $("#div3").css("z-index","1");

});

谢谢！！！

Answer 1

您可以使用 $.data 保存第一个初始值，然后每次重置以设置 $.data 中的值。

附言

我不明白你为什么放 -1 ， -2 等等...

你应该有一层和所有其他层 - 数量少（可以相同）

所以在 div 中放置一些类（“lowZ”类），定义：z-index:0

并为活动层放置活动类（“highZ”）：z-index：999

然后每次都这样做：

$(".divClass").removeClass("highZ");
$("#div2").addClass("highZ");