Question

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

基本上，我想在页面加载时将该类添加为<html>中的视口值，然后在调整其大小时更改该类。

页面加载 - 将视口的值作为类添加到<html>
窗口调整大小 - 将添加到<html>的类更改为视口值

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

修改后的代码

省略var $html = $("html");

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

    jQuery(window).resize(function(){

        var viewportwidth;

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

        jQuery("html").toggleClass(""+viewportwidth);

    });

    jQuery("html").addClass(""+viewportwidth);

我对jQuery和JS不是很有经验......

示例 - http://sandbox.iemajen.com/

感谢。

您的问题已被确定为另一个问题的可能重复。

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

Screenshot

Answer 1

试试这个答案

//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');
    }
    });
});

Answer 2

也许你可以尝试这样的事情：

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...
 });

在窗口大小上动态更改类

2 个答案: