Динамическое изменение класса при изменении размера окна

То, что я делаю и потратил много часов, пытаясь сегодня добавить класс к элементу, когда размер окна изменяется с использованием значения окна просмотра.

По сути, я хочу добавить класс в качестве значения окна просмотра в <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 возвращалось как единственный класс. То есть, когда размер окна изменяется, класс переходит к следующему значению, заменяющему прежнее.

Скриншот


javascript jquery viewport addclass toggleclass
person jarmerson    schedule 24.11.2015    source источник
comment
Возможный дубликат jquery, добавить/удалить класс при изменении ширины окна   -  person Hunter Turner    schedule 24.11.2015
comment
Как я могу подсчитать количество экземпляров .addClass(""+viewportwidth); и сохранить самый старый/последний при удалении предыдущего?   -  person jarmerson    schedule 25.11.2015

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте этот ответ

//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');
    }
    });
});
person Tariq    schedule 24.11.2015

arrow_upward
0
arrow_downward

Может быть, вы можете попробовать что-то вроде этого:

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

or

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...
 });
person Guillaume    schedule 24.11.2015