Question

我不确定如何使用窗口事件的顺序加载并调整jQuery大小以使其在调整大小时起作用。第一个函数用于获取除滚动条宽度之外的总宽度，因为CSS使用的是设备宽度，但JS使用的是文档宽度。

第二个功能在总屏幕宽度介于768px和1024px之间时添加样式，当我在任何屏幕上加载页面，调整大小等后它应该可以工作。我做了很多测试而我认为问题是关于窗口事件的顺序。

为了更具体地解决这些问题，当我以900px加载页面并将其展开为＆gt;时，它不会删除样式 1,024像素！或者相反，当我以1300px加载页面并且将宽度缩短到900px时，它不会添加样式。

我认为这是导致加载和调整事件顺序的原因，但我并不完全确定。或者我可能没有在变量调整中正确声明变量。

代码：

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };

}

$(document).ready(function(){        
    var vpwidth=$(window).width();    

        $(window).on('resize', function(){            
            var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;

                if(vpwidth >= 768 && vpwidth <= 1024) {
                    $('.contentleft, .contentright').css('width', changeWidth + 'px');
                } else {
                    $('.contentleft, .contentright').removeAttr('style');
                }

        }).resize();

});

Answer 1

我认为问题在于您不会在调整大小时重新计算vpwidth，因此每次调整窗口大小时都会使用您在加载页面时获得的值。

试

$(document).ready(function(){            

    $(window).on('resize', function(){ 
       var vpwidth=$(window).width(); // get the new value after resize
       var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;

       if(vpwidth >= 768 && vpwidth <= 1024) {
           $('.contentleft, .contentright').css('width', changeWidth + 'px');
        } else {
            $('.contentleft, .contentright').removeAttr('style');
        }

    }).resize();

});

Answer 2

问题是因为您没有重新计算width函数上的resize（vpwidth）。

它已初始化并设置在页面加载本身，因此在调整窗口大小时不会更改，从而导致不添加或删除样式。

您需要从resize函数中重新赋值给变量。

$(window).on('resize', function(){   
        var vpwidth=$(window).width();
}

Demo Fiddle

窗口事件的jQuery函数（加载和调整大小）

2 个答案: