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元素的副本，并隐藏/显示所需的元素，具体取决于与所需分辨率匹配的媒体查询。

Answer 2

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

$(window).resize(function(){
   myFunction();
});

$(window).load(function(){
   myFunction();
});
$(document).ready(function(){
   myFunction();
});

使用$（window）.resize和初始页面加载调用函数

2 个答案: