Question

我编写了一个在页面首次加载时以及用户调整窗口大小时应该触发的函数。它在页面加载时工作正常，但在用户调整窗口大小时不起作用。奇怪的是，如果我在函数内部发出警报，那么当窗口调整大小时会出现该警报，但该函数的其余部分不会触发。我在Chrome的控制台中没有看到任何错误。我尝试将其更改为$(document).resize()，$("body").resize()和$(".pricingHeader").resize()，但没有任何效果。这对我来说毫无意义。

function getTallest() {
    var tallest = 0;
    $(".pricingHeader").not(".features .pricingHeader").each(function(){
       tallest = $(this).height() > tallest?$(this).height():tallest;
    });
    $(".pricingHeader").not(".features .pricingHeader").height(tallest);
    $(".features .pricingHeader").height(tallest + 8);
}
$(document).ready(function() {
    getTallest();
});
$(window).resize(function() {
    getTallest();
});

Answer 1

尝试：

function getTallest() {
    var tallest = 0;
    $(".pricingHeader").not(".features .pricingHeader").each(function(i, elem){
       if ( $(elem).height() > tallest ) tallest = $(elem).height();
    });
    $(".pricingHeader").height(function() {
        var add = $(this).closest('.features').length ? 8 : 0;
        return tallest+add;
    });
}

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

Answer 2

好吧，我弄清楚问题是什么。我将每个.pricingHeader的高度设置为固定高度，这阻止了最高的窗口调整大小。这是固定的脚本：

function getTallest() {
    var tallest = 0;
    $(".pricingHeader").not(".features .pricingHeader").each(function(){
        $(this).css({height:"auto"});
        tallest = $(this).height() > tallest?$(this).height():tallest;
    });
    $(".pricingHeader").each(function() {
        $(".pricingHeader").not(".features .pricingHeader").height(tallest);
        $(".features .pricingHeader").height(tallest + 8);
    });
}
$(document).ready(function() {
    getTallest();
});
$(window).resize(function() {
    getTallest();
});

$（window）.resize（）不会触发函数

2 个答案: