jQuery: динамически добавлять класс в зависимости от разрешения окна браузера.

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

Варианты, которые я хочу достичь, следующие:

Когда посетитель заходит на мой сайт, этот код должен проверить размер окон его браузера и добавить класс в тело в соответствии со следующими правилами.

  1. Если размер окна больше 1024 пикселей, но меньше 1280 пикселей, добавьте класс .w1280.

  2. Если размер окна больше 1280 пикселей, но меньше 1440 пикселей, добавьте класс .w1440.

  3. Если размер окна больше 1440 пикселей, но меньше 1280 пикселей, добавьте класс .w1680.

  4. Если размер окна более 1680 пикселей, добавьте класс .wLarge.

Для этого я пытаюсь использовать следующий скрипт. Мои вопросы:

  1. Это правильный код? Если нет, то какой правильный код?

  2. Это лучший самый короткий код? Если нет, то какой будет правильный код?

Пожалуйста, помогите, так как мои знания jQuery почти нулевые.

function checkWindowSize() {  
    if ( $(window).width() > 1024) { 
        $('body').addClass('w1280');  
        } else {  
        $('body').removeClass('w1280');  
    } 
    if ( $(window).width() > 1280 ) { 
        $('body').addClass('w1440');  
        } else {  
        $('body').removeClass('w1440');  
    } 
    if ( $(window).width() > 1440) { 
        $('body').addClass('w1680');  
        } else {  
        $('body').removeClass('w1680');  
    } 
    if ( $(window).width() > 1600) { 
        $('body').addClass('wLarge');  
        } else {  
        $('body').removeClass('wLarge');  
    } 
}    
checkWindowSize()

jquery window resize addclass
person Vikram Rao    schedule 26.01.2011    source источник

Ответы (2)


arrow_upward
8
arrow_downward

Если вы не храните какие-либо другие классы в элементе body, вы можете сделать это:

function checkWindowSize() {
    var width = $(window).width();
    document.body.className = width > 1600 ? 'wLarge' :
                              width > 1440 ? 'w1680' :
                              width > 1280 ? 'w1440' :
                              width > 1024 ? 'w1280' : '';
}

Некоторые люди могут посоветовать вам сделать это с помощью оператора switch, но некоторые люди также любят есть своих детенышей.

Эта функция перезаписывает класс body каждый раз, когда она вызывается (по умолчанию, если браузер меньше или равен 1024 пикселям, это вообще не класс), так что, как я уже сказал, она не будет работать, если ваш body имеет другие классы, которые необходимо поддерживать.

ИЗМЕНИТЬ Согласно предложениям Шиме, вот более безопасный способ сделать это:

function checkWindowSize() {
    var width = $(window).width(),
    new_class = width > 1600 ? 'wLarge' :
                width > 1440 ? 'w1680' :
                width > 1280 ? 'w1440' :
                width > 1024 ? 'w1280' : '';

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class);
}
person sdleihssirhc    schedule 26.01.2011
comment
@sdl Нет необходимости полностью перезаписывать свойство className. Просто поместите строку в переменную: var c = width ..., а затем: c && $('body').addClass(c); - person Šime Vidas; 26.01.2011
comment
@Šime Но если эта функция будет вызываться несколько раз (например, всякий раз, когда пользователь изменяет размер окна), было бы хорошо избавиться от старых, более не актуальных классов. - person sdleihssirhc; 26.01.2011
comment
@sdl ОП не сказал, что собирается вызывать его несколько раз. Но независимо от этого вы не хотите удалять все классы, так как другие скрипты могут добавлять имена классов. Вот так бы и было: $('body').removeClass('w1280 w1440 w1680 wLarge').addClass(c); - person Šime Vidas; 26.01.2011
comment
@Šime Ты прав; Я забыл, что jQuery может удалять несколько классов одновременно. - person sdleihssirhc; 26.01.2011
comment
Итак, @sdl - это правильный синтаксис с предложением @sim? в противном случае я могу попросить @sim предоставить правильный синтаксис в соответствии с его предложениями? - person Vikram Rao; 26.01.2011
comment
Привет, @sdl, так мило с твоей стороны. Большое спасибо за помощь. - person Vikram Rao; 26.01.2011
comment
LOL - некоторые люди также любят есть своих детенышей... - person DaveAlger; 18.10.2012

arrow_upward
0
arrow_downward

Это сработало благодаря комментарию Наины здесь: https://www.quora.com/How-do-I-add-and-remove-CSS-classes-using-jQuery-based-on-the-размерэкрана

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        if($(window).width() < 768) {
           $("#myDiv").addClass("myClass");
           $("#otherDiv").removeClass("myClass");  
        }    
    });
</script>
person user3669077    schedule 23.05.2018