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

从我的代码中可以看出，您正在尝试重置文档和元素<div class="element-hero"></div>之间的间距。为此，使用JQuery可能不是最好的方法，而仅使用某种CSS重置表或类似Bootstrap的框架来实现此目标将是更明智的选择（原因是在不使用JavaScript弄乱文档的情况下更容易实现相同的目标）

我最近得到的是与此类似的东西： JSFiddle

let resetMargin = function resetMarginFunc() {
  let docwidth = $(document).width();
  let herowidth = $('.element-hero').width();
  let margins = ((docwidth - herowidth) / 2);
  $('.element-hero').css({
      "margin-left": -(margins)
  });
}

$(document).ready(function() {
  //On init:
  resetMargin();
  
  //On resize:  
  $(window).resize(function() {
    //Set new values of the elements after a resize:
    resetMargin();
  });
});

/*In order to make element visible and view changes:*/
.element-hero {
  border: 1px solid #000;
  height: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element-hero">  
</div>

在SO上查看结果时，请确保调整浏览器窗口的大小，或者在JSFiddle页面上调整文档窗口的大小以查看结果。

如果还有其他问题，请告诉我（将其留在下面的评论中）。

Answer 2

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

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);

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

2 个答案: