变量未在事件处理程序的功能中重置

Question

我有一个页面，其中有3列，并且文本量各不相同。 这三列的高度必须相同。 我编写了一个函数，该函数查看每列的高度，检查最高的列，然后将其所有高度设置为该长度。

我在运行此功能的window.onresize事件上有一个事件处理程序。 在此函数开始时，变量max_height设置为0。问题是，多次调用后，它似乎从未复位为0。 新的max_height似乎一直被添加到其中，每次调整大小时，列的高度都越来越高。 我想念什么？

提前致谢。

function resizeHeights(){
    var callouts = $('.callout');
    var max_height = 0;
    callouts.each(function(i){
        if($(callouts[i]).height() > max_height){
            max_height = $(callouts[i]).height();
            console.dir(max_height);
            $(callouts[i]).height(0);
        }   
    });
    callouts.each(function(i){
        $(callouts[i]).height(max_height + 50);
    });
}

$(window).on('resize', function(){
    resizeHeights();
});

Answer 1

您的代码将max_height设置为您拥有的最高列。 而且，由于最终将所有列都设置为max_height + 50 ，因此每次调用此函数时，列将增加50像素。

问题是您永远无法看到列的“自然”高度，因为一旦调用此函数，该高度将硬连线到您先前设置的高度，并且不允许响应布局更改更改大小的窗口。

您可能需要这样做的是清除所有列中的css高度设置，然后强制浏览器重新布局（这样就计算出新的自然高度），然后运行函数中的其余代码，以便可以看到列，并根据新的自然高度值设置您的手动高度设置。

有关如何强制浏览器进行布局的信息，请参见此答案 。

Answer 2

尝试将ur变量max_height重命名为ex。 max_height2。 只是为了确保与其他全局变量没有冲突（如果存在）具有相同的名称。