Как удалить и добавить класс на JS (jQuery) при изменении размера экрана? Проблема после обновления страницы?

Question

[EvgenyBalalaev]

Здравствуйте.
Не силён в JS и jQuery, всё делал по мануалу и благодаря подсказкам статей из инета.

Есть такой HTML:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      CONTENT
    </div>
  </div>
</div>

Задача:
При ширине экрана меньше чем 480рх удалить класс "col-xs-12" и добавить класс "col-xs-6".
Соответственно если ширина экрана БОЛЬШЕ чем 480рх, то наоборот всё.

Пишу такой JS:

$(document).ready(function() {

	$(window).resize(function(){
		var windowWidth = $('body').innerWidth();
		if(windowWidth < 480){$(".number-bullets").removeClass('col-xs-12').addClass('col-xs-4');}
		else{$(".number-bullets").removeClass('col-xs-4').addClass('col-xs-12');}
	});
});

Вроде всё работает, но есть проблема - при обновлении страницы весь JS слетает, то есть класс снова ставятся те, которые были изначально, при этом, если обновил страницу на разрешении меньше 480рх, то при увеличении ширины JS срабатывает, но в другую сторону.

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

Помогите, пожалуйста.
Спасибо.

Answer 1

[Александр Моргунов]

Сделать можно так:

$(document).ready(function() {
  function checkWidth() {
    var windowWidth = $('body').innerWidth(),
        elem = $(".number-bullets"); // лучше сохранять объект в переменную, многократно чтобы не насиловать 
                                    // страницу для поиска нужного элемента
    if(windowWidth < 480){
      elem.removeClass('col-xs-12');
      elem.addClass('col-xs-4');
    }
    else{
      elem.removeClass('col-xs-4');
      elem.addClass('col-xs-12');
    }
  }

  checkWidth(); // проверит при загрузке страницы

  $(window).resize(function(){
    checkWidth(); // проверит при изменении размера окна клиента
  });
});

Comments

[EvgenyBalalaev]

Огромнейшее спасибо и спасибо за полностью указанный код.
Пока ещё слаб в синтаксисе и вообще в JS (jQuery)...хотя понимаю в чём дело, где ошибка, но не мог понять как реализовать =)
Ещё раз спасибо, всё работает!)

[Александр Моргунов]

EvgenyBalalaev: рад был помочь.

[Артём]

а можно перевести в чистый js?

Answer 2

[Vlad]

Сделайте при загрузке страницы
$(window).trigger('resize');

Comments

[EvgenyBalalaev]

Спасибо за ответ. Я думаю, что он не совсем мне подходит, по-крайней мере решил путём отвечающего ниже.
Благодарю за отклик и внимание к моему вопросу!=)

Answer 3

[Froggyweb]

А никого не смущает то что должен делать css делает js причем через... Или это просто бутстрап всего. Если бы ко мне пришел такой сайт я бы точно отправил на переверстку. Возможно верстальщики добавили бы нужный брекпоинт или удалили бутстрап

Comments

[EvgenyBalalaev]

Ну тут весь сайт на бутсрапе.
Это плохо разве?
Просто у бутстрапа XS - это всё, что меньше 768пх, а мне как раз нужно, чтобы в коридоре 480пх-768пх XS был в 3 колонки по 4 столбца, а вот уже меньше 480пх был в одну колонку на всю ширину.

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

Или лучше вообще не юзать бутстрап и верстать без оного?

Спасибо.