jquery - 如何使用 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);