jquery - jquery onclick添加z-index，再次撤消最后一个元素

Question

我在这里找到了以下脚本。随着我点击z-index的增加。但现在我希望最后一个元素恢复到原始状态。不知何故？

http://jsfiddle.net/dd5Wp/1/

$(function () {
    /*$("div.box").click(function() {
        console.log("start");

    })*/
    // Change this selector to find whatever your 'boxes' are
    var boxes = $("div.box");
    // Set up click handlers for each box
    boxes.click(function () {
        var el = $(this), // The box that was clicked
            max = 0;
        // Find the highest z-index
        boxes.each(function () {
            // Find the current z-index value
            var z = parseInt($(this).css("z-index"), 10);
            // Keep either the current max, or the current z-index, whichever is higher
            max = Math.max(max, z);
        });
        // Set the box that was clicked to the highest z-index plus one
        el.css("z-index", max + 1);
        /* hide and show the content*/
    });
});

Answer 1

z-index如果我理解正确，单击另一张图片后，每张图片都应返回原始图片。

看看这里，也许这是你需要的：http: //jsfiddle.net/dd5Wp/1/

代码

boxes.click(function() {
    var el = $(this), 
        max = 0;

    boxes.each(function() {

        //--- If a previous state is found, restore it
        if($(this).data("original-index")){
            $(this).css("z-index", $(this).data("original-index"));
        }
        var z = parseInt( $( this ).css( "z-index" ), 10 );
        max = Math.max( max, z );
    });

    //--- save the clicked element previous z-index
    el.data("original-index", el.css("z-index"));
    el.css("z-index", max + 1 );
});

ps：“点击行为”效果不佳，因为包装图像（保存点击行为）的 div 比图像本身大

Answer 2

我刚刚处理了您的案例，终于找到了解决方案，您的案例实际上需要金字塔式方法。只要考虑一下，点击的元素应该是金字塔的顶部。

像这样：

     ----   Clicked element (Assume that it should have z-index 4) 
  ----  ----  (Assume that it should have z-index 3) 
 ----    ----  (Assume that it should have z-index 2)
----      ----  (Assume that it should have z-index 1) 

所以为了实现这一点，我只是使用prevAll来获取左边的部分，使用nextAll来获取右边的部分。之后，我只是遍历它们并通过从顶部 z-index 递减来分配 z-index。

$(function() {

    var boxes = $("div.box");
    var boxesLength = $("div.box").length;
    var count;

    boxes.click(function() {            

        var el = $(this);
        el.css("z-index", boxesLength);

        count = boxesLength -1;
        el.prevAll(".box").each(function(){
             $(this).css("z-index", count);
             count -= 1;
        });

        count = boxesLength -1;
        el.nextAll(".box").each(function(){
             $(this).css("z-index", count);
             count -= 1;
        });

    });
});

现场 - 演示