Javascript 在调整窗口大小时动态更改类

今天，我正在做并且花了很多时间尝试的是，当使用视口的值调整窗口大小时，向元素添加一个类

基本上，我想在页面加载时将类添加为

中的视口值，然后在调整大小时更改该类

页面加载-将视口值作为类添加到

窗口大小调整-将添加到

的类更改为视口值

现在我已经把第一部分写下来了，第二部分也差不多了。它会将视口值添加为一个类，然后在调整大小时添加新值-但它只是添加永不结束的新类，而不是将它们交换出去

修改代码

省略

var$html=$（“html”）

我对jQuery和JS不是很有经验

示例-

谢谢

您的问题可能与另一个问题重复

让我试着解释得更清楚些。我希望将
window.innerWidth
的当前值作为唯一类返回。也就是说，当窗口调整大小时，类循环到下一个值来替换前一个值

试试这个答案

//OnLoad:
$(document).ready(function(){
    w_w = $(window).width();
    if(w_w > some_value){
        $("#some_id").addClass('someClass');
    }
    //onResize
    $(window).resize(function(){
    w_w = $(window).width();
    if(w_w > some_value){
        $("#some_id").addClass('someClass');
    }
    });
});

也许你可以试试这样的东西：

jQuery(window).resize(function(){
        var viewportwidth;

        if(typeof window.innerWidth!='undefined'){
              viewportwidth=window.innerWidth;
        }

        if(viewportwidth >= 768){
           $html.addClass("res_768");
        }else{
           $html.removeClass("res_768");
        }

        if(viewportwidth >= 640){
           $html.addClass("res_640");
        }else{
           $html.removeClass("res_640");
        }

        //etc...
});

或

如何计算
.addClass（“+viewportwidth”）的实例数的可能重复项并保留最旧/最后一个，同时删除上一个？
jQuery(window).resize(function(){
        var viewportwidth;

        if(typeof window.innerWidth!='undefined'){
              viewportwidth=window.innerWidth;
        }

        if(viewportwidth >= 768){
           $html.addClass("res_768");
        }else{
           $html.removeClass("res_768");
        }

        if(viewportwidth >= 640){
           $html.addClass("res_640");
        }else{
           $html.removeClass("res_640");
        }

        //etc...
});

jQuery(window).resize(function(){
        var viewportwidth;

        if(typeof window.innerWidth!='undefined'){
              viewportwidth=window.innerWidth;
        }

       $html.removeClass();//remove all classes

       if(viewportwidth >= 768){
           $html.addClass("res_768");
       }
       else if(viewportwidth >= 640){
           $html.addClass("res_640");
        }

        //etc...
 });