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 语句来执行此操作，但是，有些人可能会建议您使用 switch 语句来执行此操作 。人们也喜欢吃自己的孩子。

这个函数每次调用时都会覆盖 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);
}

Answer 2

这对我有用，感谢 Naina 的评论：
https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-screen-size

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        if($(window).width() < 768) {
           $("#myDiv").addClass("myClass");
           $("#otherDiv").removeClass("myClass");  
        }    
    });
</script>