Javascript 以升序/降序将z索引动态分配给具有特定类的未知数量的元素

我有一个类为

.book

的元素，它包含类为

.page

的随机数个元素

<div class='book'>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
    <div class='page'></div>
</div>

前三个

。页面翻转：

<div class='book'>
    <div class='page flipped' style='z-index: 1'></div>
    <div class='page flipped' style='z-index: 2'></div>
    <div class='page flipped' style='z-index: 3'></div>
    <div class='page' style='z-index: 2'></div>
    <div class='page' style='z-index: 1'></div>
</div>

这里是我将此应用到的地方，请随意使用它们：



要按顺序分配给未翻转的元素，应执行以下操作：

var max = $('div.book div.page:not(.flipped)').length;
$('div.book div.page:not(.flipped)').each(
    function() {
        $(this).css('z-index', max--);
    }
);

然后，要指定给翻转的图元，请执行以下操作：

var count = 0;
$('div.book div.flipped').each(
    function() {
        $(this).css('z-index', ++count);
    }
);

由于一个页面上有多个book元素，因此您将以不同的方式构造它：

$('div.book').each(
    function() {
        var max = $(this).children('div.page:not(.flipped)').size();
        $(this).children('div.page:not(.flipped)').each(
            function() {
                $(this).css('z-index', max--);
            }
        );

        var count = 0;
        $(this).children('div.flipped').each(
            function() {
                 $(this).css('z-index', ++count);
            }
        );
    }
);

要使其在单击书本时重新分配，请将上述代码放入函数中，并在书本单击事件中调用该函数，如下所示：

// Slightly modified to work properly, and calls the index function
$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
    indexPages();
});

// Putting zindex assignment into a function for reuse
function indexPages() {
  $('div.book').each(
        function() {
            var max = $(this).children('div.page:not(.flipped)').size();
            $(this).children('div.page:not(.flipped)').each(
                function() {
                    $(this).css('z-index', max--);
                }
            );

            var count = 0;
            $(this).children('div.flipped').each(
                function() {
                     $(this).css('z-index', ++count);
                }
            );
        }
    );
}

要按顺序指定给未翻转的图元，应执行以下操作：

var max = $('div.book div.page:not(.flipped)').length;
$('div.book div.page:not(.flipped)').each(
    function() {
        $(this).css('z-index', max--);
    }
);

然后，要指定给翻转的图元，请执行以下操作：

var count = 0;
$('div.book div.flipped').each(
    function() {
        $(this).css('z-index', ++count);
    }
);

由于一个页面上有多个book元素，因此您将以不同的方式构造它：

$('div.book').each(
    function() {
        var max = $(this).children('div.page:not(.flipped)').size();
        $(this).children('div.page:not(.flipped)').each(
            function() {
                $(this).css('z-index', max--);
            }
        );

        var count = 0;
        $(this).children('div.flipped').each(
            function() {
                 $(this).css('z-index', ++count);
            }
        );
    }
);

要使其在单击书本时重新分配，请将上述代码放入函数中，并在书本单击事件中调用该函数，如下所示：

// Slightly modified to work properly, and calls the index function
$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
    indexPages();
});

// Putting zindex assignment into a function for reuse
function indexPages() {
  $('div.book').each(
        function() {
            var max = $(this).children('div.page:not(.flipped)').size();
            $(this).children('div.page:not(.flipped)').each(
                function() {
                    $(this).css('z-index', max--);
                }
            );

            var count = 0;
            $(this).children('div.flipped').each(
                function() {
                     $(this).css('z-index', ++count);
                }
            );
        }
    );
}

这也适用于：

$(".book").each(function(){
    var pages=$(this).find(".page")
    var pages_flipped=$(this).find(".flipped")
    pages.each(function(){
        $(this).css("z-index",pages.length-pages.index($(this)))
    })
    pages_flipped.each(function(){
        $(this).css("z-index",pages_flipped.index($(this))+1)
    })    
})

至于您的更新，正确的代码是：

$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
});

如果没有，则添加一个处理程序，该处理程序在页面单击之前执行，并停止单击事件传播，这同样有效：

$(".book").each(function(){
    var pages=$(this).find(".page")
    var pages_flipped=$(this).find(".flipped")
    pages.each(function(){
        $(this).css("z-index",pages.length-pages.index($(this)))
    })
    pages_flipped.each(function(){
        $(this).css("z-index",pages_flipped.index($(this))+1)
    })    
})

至于您的更新，正确的代码是：

$('.page').click(function() {
    $(this).removeClass('no-anim').toggleClass('flipped');
    e.stopPropagation();
});

如果没有，您将添加一个处理程序，该处理程序在页面单击之前执行，并停止单击事件传播

请记住，我从0开始，所以如果你想提高它，你必须像这样做

zIndex: i + 1

这是jquery

$(function() {
$(".book").each(function() {
    $(this).find("div").each(function(i) {
        if ($(this).is(".flipped")) {
            $(this).css({
                zIndex: i
            });
        } else {
            $(this).css({
                zIndex: $(this).parent().find("div").length - i
            });
        }
    });
});
});

给你

请记住，我从0开始，所以如果你想提高它，你必须像这样做

zIndex: i + 1

这是jquery

$(function() {
$(".book").each(function() {
    $(this).find("div").each(function(i) {
        if ($(this).is(".flipped")) {
            $(this).css({
                zIndex: i
            });
        } else {
            $(this).css({
                zIndex: $(this).parent().find("div").length - i
            });
        }
    });
});
});

要找更少的线吗

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        var level = $(this).is(".flipped") ? i : ($(this).parent().find("div").length - 1) - i;
        $(this).css("zIndex", level);
    });
});


编辑

等一下：

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        $(this).css("zIndex", $(this).is(".flipped") ? (i + 1) : $(this).parent().find("div").length - i);
    });
});


：）
要找更少的行吗

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        var level = $(this).is(".flipped") ? i : ($(this).parent().find("div").length - 1) - i;
        $(this).css("zIndex", level);
    });
});


编辑

等一下：

$(".book").each(function() {
    $(this).find("div").each(function(i) {
        $(this).css("zIndex", $(this).is(".flipped") ? (i + 1) : $(this).parent().find("div").length - i);
    });
});


：）
这很好用！介意我等几分钟再接受吗？：）这很好用！介意我等几分钟再接受吗？：）第三页被第四页重叠，这是因为我从0开始，长度从1开始，（不是真的，但我从0到4，而长度是5）。。第三页被第四页重叠，这是因为我从0开始，长度从1开始，（不是真的，但我从0到4，而长度是5）。。很好！让我在做决定之前先把它摆弄一下！很好！让我在做决定之前先把它摆弄一下！我看你喜欢用更少的台词来回答问题。很明显，您不是javascript专业人士，因此提供一个更清晰/更容易理解的答案似乎是合适的。如果要求简洁，那么就可以做到，但阅读代码的人就不太清楚正在发生什么。我们将根据您的更新修改答案soon@cale_b只是让你知道朱维发布了一个更新，效果很好，但如果你有更好的答案，我会等待：）。谢谢你的帮助！！！我修改了我的答案（在最后加了一个）。它在您的小提琴中经过测试并正常工作（请注意，您需要替换/更改您的
$（'.page'）。单击（）
，根据我修改的答案）我发现您喜欢的答案行数较少。很明显，您不是javascript专业人士，因此提供一个更清晰/更容易理解的答案似乎是合适的。如果要求简洁，那么就可以做到，但阅读代码的人就不太清楚正在发生什么。我们将根据您的更新修改答案soon@cale_b只是让你知道朱维发布了一个更新，效果很好，但如果你有更好的答案，我会等待：）。谢谢你的帮助！！！我修改了我的答案（在最后加了一个）。它在您的小提琴中经过测试并正常工作（请注意，您需要替换/更改您的
$（'.page'）。根据我的修订答案单击（）
），我刚刚发布了添加的代码片段，以显示我正在切换
。通过jquery翻转了
类。但是谢谢你的更正！另外，在类被切换时z索引顺序没有更新也是我的问题。好吧，@jklm313我在你的代码中没有看到事件点击时z索引的重新排序。但是，我已经尝试过了，似乎即使使用z-index，单击的div也不同于正确的div。我发布的fiddle只有我的代码，您必须在js面板中添加您的代码，以便按降序添加z-index。然后通过单击下一页按钮切换.flipped类，您将看到z索引顺序没有得到更新，如果打开inspector并单击下一页按钮，您可以看到它。我希望我能说清楚。@jklm313 Oh从未见过“下一页”按钮，这解释了为什么我尝试时它不起作用。给你：谢谢！这很好用！让我再做几个测试！：）我刚刚发布了添加的代码片段，以显示我正在通过jquery切换
。但是谢谢你的更正！另外，在类被切换时z索引顺序没有更新也是我的问题。好吧，@jklm313我在你的代码中没有看到事件点击时z索引的重新排序。但是，我已经尝试过了，似乎即使使用z-index，单击的div也不同于正确的div。我发布的fiddle只有我的代码，您必须在js面板中添加您的代码，以便按降序添加z-index。然后通过单击下一页按钮切换.flipped类，您将看到z索引顺序没有得到更新，如果打开inspector并单击下一页按钮，您可以看到它。我希望我能说清楚。@jklm313 Oh从未见过“下一页”按钮，这解释了为什么我尝试时它不起作用。给你：谢谢！这很好用！让我再做几个测试！：）