jQuery:根据浏览器窗口分辨率动态添加类

Question

朋友您好我正在尝试根据浏览器窗口分辨率动态添加类.这是我试图使用的代码,但需要帮助调整它,因为我根本不知道jQuery.

我想要实现的选项是:

一旦访问者访问我的网站,此代码必须检查他的浏览器窗口大小,并按照以下规则将类添加到正文

1. 如果窗口大小超过 1024px 但小于 1280px,则添加类.w1280.

2. 如果窗口大小超过 1280px 但小于 1440px,则添加类.w1440.

3. 如果窗口大小超过 1440px 但小于 1280px,则添加类.w1680.

4. 如果窗口大小超过 1680px,则添加类.wLarge.

为此,我尝试使用以下脚本.我的问题是:

1. 这是正确的代码吗？如果不是什么是正确的代码？

2. 这是最短的代码吗？如果不是正确的代码是什么？

请帮助,因为我对jQuery的了解几乎是零.

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()

Answer 1

如果您没有在body元素上存储任何其他类,则可以执行以下操作:

function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}

有些人可能会建议你用switch声明来做,但是,有些人也喜欢吃他们的年轻人.

这个函数body每次被调用时都会覆盖它的类(默认情况下,如果浏览器小于/等于1024像素,根本就没有类),所以就像我说的那样,如果你body有其他类,那么它将不起作用需要维持.

编辑 PerŠime的建议,这是一个更安全的方法:

function checkWindowSize() {
    var width = $(window).width(),
    new_class = width > 1600 ? 'wLarge' :
                width > 1440 ? 'w1680' :
                width > 1280 ? 'w1440' :
                width > 1024 ? 'w1280' : '';

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class);
}