logo标签列表

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

javascriptjqueryviewportaddclasstoggleclass
4
今天我花费了很多时间，试图在窗口大小调整时使用视口的值向元素添加一个类。基本上，我想在页面加载时将视口值作为<html>的类添加，然后随着调整大小而更改该类。
  1. 页面加载 - 将视口的值作为类添加到<html>
  2. 窗口调整大小 - 更改添加到<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返回为唯一的类。也就是说，当窗口大小调整时，该类会循环到下一个值并替换前一个值。

截图

可能是重复的问题：jquery, add/remove class when window width changes - Hunter Turner
我该如何计算 .addClass(""+viewportwidth); 的实例数量并保留最旧/最新的同时删除之前的实例？ - Jarod Thornton
2个回答
2

尝试这个答案

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

也许你可以尝试这样做：

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...
 });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接