嘿伙计们,我试图在页面最初加载时以及调整窗口大小时调用我的函数,但我不确定如何做到这一点。我目前有以下代码:
$(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'));
}
});
正如您所看到的,当页面大小调整时,此函数将运行,但我也希望它在页面初始加载时运行。
知道如何做到这一点吗?谢谢
最佳答案
您也可以调用不带参数的 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
元素的副本,并根据与所需分辨率匹配的媒体查询隐藏/显示所需的元素。
关于javascript - 使用 $(window).resize 并在初始页面加载时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37696989/