Question

我有以下jquery代码来调整一组元素的大小，使它们与最高元素的高度相同。刷新屏幕时该功能正常，但$（window）.resize（）似乎不起作用。

jQuery(document).ready(function($) {

    function equal_height(target) {
        var maxHeight = -1;

        $(target).each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });

        $(target).each(function() {
            $(this).height(maxHeight);
        }); 
    };

    var responsive_viewport = $(window).width();

    if (responsive_viewport >= 768) {

        equal_height('.cta-text');

        $(window).resize(function() {
            equal_height('.cta-text');
        });
    }

});

Answer 1

我会考虑重构来分离你的功能和事件。此外，您正在检查document准备好的窗口，此时窗口对象尚未加载任何内容（在窗口呈现之前DOM已准备就绪）。试试这个：

jQuery(window).load(function($) {

    var responsive_viewport = $(window).width();

    if (responsive_viewport >= 768) {
        equal_height('.cta-text');

        $(window).resize(function() {
            equal_height('.cta-text');
        });
    }

});


function equal_height(target) {
    var maxHeight = -1;

    $(target).each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });

    $(target).each(function() {
        $(this).height(maxHeight);
    }); 
};

我还应该提一下，因为你的resize函数在条件语句中，它只会在视口大于768像素时触发 - 所以请确保在调试时考虑到这一点。

Answer 2

解决了！

问题不在于如何或何时调用函数，它不起作用，因为它是基于第一次运行函数时设置的大小的新大小。

我已经将它添加到equal_height函数的开头，将元素的高度重置为它的自然高度。

$(target).each(function() { 
    $(this).height('auto');
});

Answer 3

使用$(window).resize(function(){});在调整大小时触发事件。它仅在您刷新时有效，因为您当前没有告诉它在调整大小时运行任何内容，而是在文档完全加载并准备就绪时。

$（window）.resize（）不起作用

3 个答案: