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中的值。

P.S。

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

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

所以把一些类放在divs（“lowZ”类）上，它定义了：z-index：0

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

然后每次都这样做：

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

jQuery和Z-Indexes重置

1 个答案: