JQuery:如何在浏览器调整大小时更新变量？

Question

<script>
    $(document).ready ( function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
    $(window).bind("resize", function () {
        var footerheight = $('#footer').height();
        $('#footer').css('height', footerheight);
        $('#footer').css('marginTop', - footerheight);
        $('#nonfooterinner').css('paddingBottom', footerheight);
    });
</script>

这是将变量“footerheight”设置为随着浏览器大小调整而更新的正确/首选方法吗？脚本的上半部分显然决定了文档加载时的变量，但我不确定下半部分是否已正确编写脚本以在窗口扩展/收缩时更新该变量。

Answer 1

您可以使用变量稍微压缩它，例如:

var f = (function () {
       var footerheight = $('#footer').height();
       $('#footer').css('height', footerheight);
       $('#footer').css('marginTop', -footerheight);
       $('#nonfooterinner').css('paddingBottom', footerheight);
   });

$(document).ready(f);
$(window).resize(f);

单独调整大小时使用.resize()像这样:

$(window).resize(function () {
    var footerheight = $('#footer').height();
    $('#footer').css('height', footerheight);
    $('#footer').css('marginTop', - footerheight);
    $('#nonfooterinner').css('paddingBottom', footerheight);
});