Question

我有一个使用equalHeight的代码。将colums设置为相同的高度。但我用窗口调整大小。该脚本仅适用于台式机和平板电脑，而不适用于移动设备。我有这个脚本。这个脚本正在运行，但是如何让这个脚本变得更好？因为我现在使用了两次相同的功能。

我怎样才能做得更好？

var viewportWidth = $(window).width();
if ((viewportWidth >= 760)) {
    setTimeout(function() {
        equalHeight($('#footer .column'));
    }, 250);
};
$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
});

Answer 1

您可以定义自定义函数并在需要时调用它：

function changeWidth() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

$(document).ready(function() {
    changeWidth();
    $(window).resize(function() {
        changeWidth();
    });
});

Answer 2

您可以通过触发resize事件来避免重复：

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
})
.trigger('resize');

Answer 3

试试这种方式

$(document).ready(function() {
    resizeFunction();

    $(window).resize(function() {
        resizeFunction();
    });
});

var resizeFunction = new function() {
    var viewportWidth = $(window).width();
    if ((viewportWidth >= 760)) {
        setTimeout(function() {
            equalHeight($('#footer .column'));
        }, 250);
    };
}

equalHeight with resize for responsive

3 个答案: