Question

我尝试在加载和调整大小时将所有div设置为最高div的高度。这是代码：

// set equal column heights
function eqColumn(){
    if ($(window).width() > 767){
        var item = $(".item");
        var biggest = 0;
        $(item).each(function(){
            if ($(this).height() > biggest){
                biggest = $(this).height();
                console.log(".item height = " + biggest);
            }
        });
        item.css("height", biggest);
    }
}

// bind events
$(window).on("load resize", eqColumn);

它在加载时工作正常，但在我调整窗口大小时却没有。当我在控制台中记录值时，值在调整大小时不会改变。我真的很难过。以下是示例网站：http://dev.thomasveit.com/zuzuegler/

我做错了什么？

Answer 1

这是因为加载/调整大小后所有项目都相同。因为当eqColumn函数第一次运行时，所有它们都会调整大小：

item.css("height", biggest);

尝试在.each迭代之前重置.item大小：

function eqColumn(){
if ($(window).width() > 767){
    var item = $(".item");
    //reset the height to auto
    item.css("height", "auto");
    var biggest = 0;
    $(item).each(function(){
        if ($(this).height() > biggest){
            biggest = $(this).height();
            console.log(".item height = " + biggest);
        }
    });
    item.css("height", biggest);
}
}

jQuery - Resize之后的Equal Div-Heights

1 个答案: