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

Question

你好朋友我正在尝试根据浏览器窗口分辨率动态地向正文添加一个类。这是我正在尝试使用的代码，但需要帮助调整它，因为我根本不了解 jQuery。

我想要实现的选项是：

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

1. 如果窗口大小大于1024像素但小于1280 像素，则添加 class .w1280。

2. 如果窗口大小大于1280像素但小于1440 像素，则添加 class .w1440。

3. 如果窗口大小大于1440 像素但小于1280 像素，则添加 class .w1680。

4. 如果窗口大小超过1680 像素，则添加 class .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's 类（默认情况下，如果浏览器小于/等于 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);
}

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>