javascript - jQuery 中的窗口调整大小无法正常工作

Question

我有下面的 jQuery 函数，它的目的是在窗口加载时删除一个类，并在宽度大于 992 像素时调整大小，如果宽度小于 992 像素则添加一个类。

它似乎工作正常，但是如果我将窗口大小从 992 增加到 1010 像素，该类仍会添加。在 1011px 时它被删除。

jQuery(document).ready(function($){

$(window).on('resize', function() {
if($(window).width() > 992) {
     $('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{

     $('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});

Answer 1

不久前我也遇到过类似的问题。这是我的拼凑修复。

var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
    windowHeight = document.body.offsetHeight;
    windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
    windowHeight = document.documentElement.offsetHeight;
    windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
    windowHeight = window.innerHeight;
    windowWidth = window.innerWidth;
}

if(windowWidth  > 992) {
     $('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{

     $('.bid-overlay-booking').addClass('fancyboxID-booking');
}