Question

我有一个类.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>

.pages s像书中的页面一样排列在彼此之上，因此第一个.page元素需要具有最高的z-index，其等于{{1 .page中的元素。

目前我在CSS中手动分配每个.book的z-index，但我希望更灵活。
有没有办法计算.page中.page元素的数量，并使用javascript动态分配.book？我也喜欢反向发生。当翻转z-index时，我希望以相反的顺序分配给它的z-index顺序。

例：
正常：

.page

前三个<div class='book'> <div class='page' style='z-index: 5'></div> <div class='page' style='z-index: 4'></div> <div class='page' style='z-index: 3'></div> <div class='page' style='z-index: 2'></div> <div class='page' style='z-index: 1'></div> </div>翻转：

.page

我对jQuery没问题。

JSFIDDLE

更新：
每个人的答案都适用于简化的测试用例，但是当我在原始作品中使用它时，＆＃39; z-index＆＃39;订单似乎没有更新。
小提琴：http://jsfiddle.net/jklm313/HwR9c/（没有你的代码）。
我使用jQuery在＆＃39; .page＆＃39;上切换<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>课程。单击它时的元素：

.flipped

我在这里应用此功能，请随时使用：
Responsive Book Layout
Book

Answer 1

要按顺序分配给非翻转元素，这应该可以解决问题：

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);
    }
);

由于页面上有多个书籍元素，因此您的构造方式会略有不同：

$('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);
                }
            );
        }
    );
}

Answer 2

这也有效：

$(".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();
});

如果不是，则添加在页面单击之前执行的处理程序，并停止单击事件传播

Answer 3

你去吧

请记住，我从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
            });
        }
    });
});
});

http://jsfiddle.net/honk1/L8E8a/1/

Answer 4

寻找更少的线？

$(".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);
    });
});

http://jsfiddle.net/honk1/L8E8a/3/

修改

等一下：

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

http://jsfiddle.net/honk1/L8E8a/5/

：）

以递增/递减顺序动态地将z-index分配给具有特定类的未知数量的元素

4 个答案: