事件处理程序函数中的不重置变量

Question

我有一个页面，其中有3列和不同数量的文本。这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高度设置，然后强制浏览器中继(因此计算了新的自然高度)，然后在函数中运行其余的代码，以便您可以看到列的自然高度，并根据新的自然高度值进行手动高度设置。

有关如何强制浏览器执行布局，请参见this answer。

Answer 2

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