如何使用jQuery动态重新评估函数？

Question

我已经设置了以下jQuery函数来为<div>元素添加负左边距

$(document).ready(function(){

    var docwidth = $(document).width();
    var herowidth = $('.element-hero').width();
    var leftmargin = docwidth - herowidth;

    $('.element-hero').css({ "margin-left": -leftmargin,});

});

正如您所看到的,它获取文档宽度和<div class="element-hero">宽度,并向后者应用负左边距等于这两个值之间的差异.

它工作正常,直到我尝试调整浏览器窗口的大小; 我需要在调整窗口大小时动态重新计算左边距的值(当然不重新加载).

现在,如果我们假设,例如,初始值为docwidth = 1200px和herowidth = 900px,则左边距设置为-300px; 如果我调整窗口大小docwidth = 1400px,我希望有一个余量-500px,但这不是真正发生的事情,原始计算值-300px保持到我手动重新加载窗口.

从我得到的,问题是.ready()在文档完全加载后使用运行脚本一次; 我还需要在每次调整窗口大小时计算此值,并相应地更新.

我应该如何修改此代码？

Answer 1

我已经设法用以下代码解决了这个问题：

var heroMargin = function(){

    var docwidth = $(document).width();
    var herowidth = $('.element-hero').width();
    var leftmargin = (docwidth - herowidth);

    $('.element-hero').css({ "margin-left": -leftmargin,});

};

$(document).ready(heroMargin);

$(window).resize(heroMargin);