窗口事件的jQuery函数(加载和调整大小) [英] jQuery function on window events (load and resize)

问题描述

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

I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.

第二个功能在屏幕总宽度在768px和1024px之间时添加了一种样式，并且当我在任何屏幕上加载页面，调整大小后等功能都可以使用.我正在做很多测试，我认为问题是关于窗口事件顺序的.

The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.

为更具体地说明问题，它不会删除样式，当我将页面加载为900px并将其扩展到> 1024px时！或相反，当我将页面加载为1300px并将宽度缩短为900px时，它不会添加样式.

For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.

我认为这是加载和调整大小事件顺序的原因，但我不确定".也许我没有在调整大小中正确声明变量.

I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.

代码:

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

});

推荐答案

我相信问题是您没有在调整大小时重新计算vpwidth，因此将使用页面加载时获得的值每次调整窗口大小.

I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.

尝试

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

});

这篇关于窗口事件的jQuery函数(加载和调整大小)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！