javascript - javascript中的z-index排序

Question

试图让这个 z 排序正常工作。我想要实现的是某种循环/轮播。当单击“.area”时，应将其放置在最底部的 z-wize 处。当所有元素都设置为底部时，它们应该再次开始放置。不需要动画。只需要逻辑上的帮助。

真的像一个旋转木马，但 z 方向。有任何想法吗？http://jsfiddle.net/EjpSu/8/

var z = 1;

$(".area").each(function(e) {
    z++;
    $(this).css("z-index",z)
});

$(".area").click(function(){
    $(this).css("z-index",z--)
})

Answer 1

尝试从 z-index 中减去区域 div 的总数（更新以保持 z-index 非负）：

var n = $(".area").length;

$(".area").click(function(){
    var z = $(this).css("z-index") - n;
    if(z === 0) {
        reset();
    } else {
        $(this).css("z-index", z);
    }
});

function reset() {
    var z = n;
    $(".area").each(function(e) {
        $(this).css("z-index",z);
        z++;
    });
};    
reset();

演示：http: //jsfiddle.net/verashn/mTKRL/