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

问题是你永远无法看到＆＃34;自然＆＃34;列的高度，因为一旦您调用此函数一次，高度就会硬连接到您之前设置的高度，并且由于窗口更改大小而不允许响应布局更改。

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

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

Answer 2

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

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

2 个答案: