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

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 像素。

问题是您永远无法看到列的 "natural" 高度，因为一旦调用此函数一次，高度就会硬连接到您之前设置的高度，而不是允许响应由于 window 大小变化引起的布局变化。

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

请参阅 this answer 了解如何强制浏览器进行布局。

Answer 2

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

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

Variable not resetting in function of event handler

javascript

jquery

javascript-events