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

Question

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

варианты я хочу достичь являются:

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

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

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

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

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

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

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

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

Просьба помочь, поскольку мои знания о jQuery - почти ZERO.

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() 

Answer 1

Если вы не хранить любые другие классы на 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 имеет другие классы, которые необходимо поддерживать.

EDIT предложения Per SIME, вот это более безопасный способ сделать это:

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