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

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

$(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')); 
    } 
});

正如你可以看到当页面大小不过这个功能将运行我也希望它在页面还的初始加载运行。

任何想法如何做到这一点？由于

来源

2016-06-08 Nick Maddren

您可以致电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元素的副本，并根据与所需分辨率匹配的媒体查询隐藏/显示所需元素。

来源

2016-06-08 08:22:39

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

来源

2016-06-08 08:30:17 Samir

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

回答

相关问题