javascript - 使用 $(window).resize 并在初始页面加载时调用函数

Question

嘿伙计们，我试图在页面最初加载时以及调整窗口大小时调用我的函数，但我不确定如何做到这一点。我目前有以下代码:

$(window).resize(function(){
  var offerPageMediaQuery = window.matchMedia('all and (max-width: 969px)');
  if(mq.matches) {
      $('.mobileposition').append($('.offer-key-info'));
  } else {
      $('.offer-content').append($('.offer-key-info'));
  }
});

正如您所看到的，当页面大小调整时，此函数将运行，但我也希望它在页面初始加载时运行。

知道如何做到这一点吗？谢谢

Answer 1

您也可以调用不带参数的 resize() 来引发事件:

$(window).resize(function(){
    var offerPageMediaQuery = window.matchMedia('all and (max-width: 969px)');
    $(mq.matches ? '.mobileposition' : '.offer-content').append($('.offer-key-info'));
}).resize(); // call here

或者，您可以将逻辑提取到函数中并在两个事件下调用它:

function foo() {
    var offerPageMediaQuery = window.matchMedia('all and (max-width: 969px)');
    $(mq.matches ? '.mobileposition' : '.offer-content').append($('.offer-key-info'));
}

$(window).resize(foo);
foo();

我还建议使用 CSS 媒体查询而不是依赖 JS 来完成此操作可能会更好。您可以在 DOM 中的两个位置都拥有 .offer-key-info 元素的副本，并根据与所需分辨率匹配的媒体查询隐藏/显示所需的元素。