Динамически меняющийся класс при изменении окна

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

В принципе, я хочу добавить класс как значение вида просмотра в <html> на загрузку страницы, а затем изменить этот класс по мере его изменения. нагрузка

Page - добавить значение видового экрана в качестве класса <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

источник

2015-11-24 jarmerson

Возможные дубликата [JQuery, добавить/удалить класс, когда изменения ширины окна] (http://stackoverflow.com/questions/11047514/jquery-add-remove-class-when-window-width-changes) –

Как подсчитать количество экземпляров '.addClass (" "+ viewportwidth); 'и сохранить самый старый/последний, удалив предыдущий? – jarmerson

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

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

источник

2015-11-24 18:11:33 Tarek

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

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

источник

2015-11-24 18:13:22 Guillaume

Динамически меняющийся класс при изменении окна

ответ

Смежные вопросы