jQuery : Add class dynamically depending on the browser window resolution

Question

friend 们大家好，我正在尝试根据浏览器窗口分辨率动态向正文添加一个类。这是我尝试使用的代码，但需要帮助调整它，因为我根本不了解 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 语句来做到这一点，但是，有些人也喜欢吃自己的 child 。

这个函数每次调用时都会覆盖body的类(默认情况下，如果浏览器小于/等于1024像素，则根本没有类)，所以就像我说的如果您的 body 有其他需要维护的类，它将无法工作。

编辑根据 Š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);
}