JQuery добавить / удалить классы по ширине окна

Question

JQuery добавить / удалить классы по ширине окна

0

Пытаясь написать небольшой скрипт, который добавляет/удаляет классы, основанные на окне,

любая помощь будет оценена по достоинству.

<script type="text/javascript">
  $(document).ready( function() {
    if ($(window).width() < 500) {
     $('.single-post-rating').removeClass('col-xs-3');
     $('.single-post-rating').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9');
     $('.guide-excerpt').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3');
     $('.single-post-rating').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9');
     $('.guide-excerpt').removeClass('col-xs-12');
    }
  });
</script>

Keyfer Mathewson 20 сен. 2013, в 00:15

Источник

Теги:

javascript

jquery

html

2 ответа

Ещё вопросы

ReDEyeS · Answer 1 · 2013-09-19T19-37-00.000Z

Если вы хотите продолжить этот путь, это одно из лучших решений для управления шириной окна: добавьте класс css управления с атрибутом min-with и присвойте этот класс контейнеру

CSS:

.mediaquerycontrol {
    min-width: 0px;
}

@media (min-width: 992px) {

    .mediaquerycontrol {
        min-width: 992px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {

    .mediaquerycontrol {
        min-width: 768px;
    }
}
@media (min-width: 1200px) {

    .mediaquerycontrol {
        min-width: 1200px;
    }
}

HTML:

<body>
  <div class="container mediaquerycontrol">
...

JavaScript:

<script type="text/javascript">
  $(document).ready( function() {
    var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, ''))

    if (pageWidth  < 500) {
     $('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
     $('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
    }
    else {
     $('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
     $('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
    }
  });
</script>

но мой совет - использовать функции бутстрапа, и если вам нужны меньшие столбцы, вы можете увеличить количество столбцов по умолчанию (например, от 12 до 24, если вы используете версию 2.3.2)

http://getbootstrap.com/2.3.2/customize.html

Meximize · Answer 2 · 2013-09-19T19-07-00.000Z

Я думаю, что после ширины окна просмотра.

Вы можете получить доступ к этому с помощью

var viewPortWidth = document.documentElement.clientWidth;

В стороне, вы можете выполнить множество хороших макетов с помощью CSS-запросов.

Полностью. Все остальное в моем документе - через медиа-запросы, эта часть просто хитрая, потому что я использую столбцы Bootstrap, но добавляю еще меньший.
Есть ли в любом случае вы могли бы через ваш пример в моем коде? Я не слишком уверен, как его использовать.