使用$（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元素的副本，並根據與所需分辨率匹配的媒體查詢隱藏/顯示所需元素。

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