Как сделать динамическое срабатывание $(window).width()?

Question

[v-orlov]

Например, есть код:

if ($(window).width() < 480) {
    $('.wow').addClass('slider');
}
else {
    $('.wow').removeClass('slider');
}

то есть если ширина экрана 480- то добавить класс, если меньше убрать. но этот скрипт срабатывает только в случае обновления страницы. уменьшил экран -> обновил -> увидел класс.

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

но все же, как "динамически" определять ширину и удалять/добавлять класс? без перезагрузки
я думал на каким-нибудь $(window).resize(); но логику не придумаю

если кому-то нечто подобное попадалось, заранее благодарю за помощь и совет )

Answer 1

[Виталий Инчин ☢]

$(function(){
  $(window).resize(function(){
    $('.wow').toggleClass('slider', $(window).width() < 480);
  }).resize()
});

Answer 2

[Антон Шаманов]

сделать из этого кода функцию и забиньдить её на resize и load

Answer 3

[Даша Циклаури]

добавлю к ответу выше: вынесите $('.wow') за пределы колбэка ресайза:

var wow = $('.wow');
$(window).resize(function(){
  if(...)
    wow.addClass('slider');
else
    wow.removeClass('slider');
});

UPD:

var barrierWidth = 480;
var belowBar = currentWidth<480;
var wow = $('.wow');
function recalc(width){
  if(width<barrierWidth && !belowBar)
    wow.addClass('slider');
  else if(width>barrierWidth && belowBar)
    wow.removeClass('slider');
};
$(window).resize(function(){
    recalc(width);
});

Answer 4

[v-orlov]

предложенные варианты подошли, спасибо. но вот слайдер меня озадачил )
он после себя оставляет еще 20 классов внутри моего списка .wow, то есть все чистить долго и неправильно.

как сделать автоперезагрузку на какой-то определенной ширине браузера? то есть начали сжимать окно, дошли до 480, поймали перезагрузку и тд? чтобы на 480 постоянно релоад был

(я просто для себя пробую, на реальном проекте, конечно, такое делать - бред)