Question

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

我想要达到的选项是：

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

如果窗口大小 1024px 但小于 1280px，则添加类.w1280。
如果窗口大小 1280px 但小于 1440px，则添加课程.w1440。
如果窗口大小 1440px 但小于 1280px，则添加课程.w1680。
如果窗口大小大于 1680px，则添加类.wLarge。

为实现此目的，我尝试使用以下脚本。我的问题是：

这是正确的代码吗？如果不是什么是正确的代码？
这是最好的最短代码吗？如果没有，那么正确的代码是什么？

请帮助，因为我对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有其他需要维护的类，则可以正常工作。

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

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

2 个答案: