Лучший способ написать следующий jquery

Question

Im совершенно новый для javaScript/jquery. Я написал следующий код, чтобы переключить мобильную навигацию, но я уверен, что есть простой способ объединить следующие кодовые блоки. Я был бы признателен за советы, как написать это лучше, более изящный способ. Благодаря

$(document).ready(function(){ 
var width = $(window).width(); 
    if(width <=500){ 
     $("nav").addClass("mobile").removeClass("desktop"); 
    } 
    else{ 
     $("nav").removeClass("mobile").addClass("desktop"); 
    } 

}); 

$(document).ready(function(){ 
    $(window).resize(function(){ 
    var width = $(window).width(); 
    if(width <=500){ 
     $("nav").addClass("mobile").removeClass("desktop"); 
    } 
    else{ 
     $("nav").removeClass("mobile").addClass("desktop"); 
    } 
});}); 

Answer 1

Просто создать одну функцию и вызвать ее дважды:

function changeClasses() { 
    var width = $(window).width(); 
    if(width <=500){ 
     $("nav").addClass("mobile").removeClass("desktop"); 
    } 
    else{ 
     $("nav").removeClass("mobile").addClass("desktop"); 
    } 
} 

$(document).ready(changeClasses); 
$(window).resize(changeClasses); 

Answer 2

Вы можете сделать его в отдельную функцию, которая будет очищать его немного:

function toggleClass() { 
    var width = $(window).width(); 
    if(width <=500) { 
     $("nav").addClass("mobile").removeClass("desktop"); 
    } else { 
     $("nav").removeClass("mobile").addClass("desktop"); 
    } 
} 

$(document).ready(function(){ 
    toggleClass(); 
}); 

$(window).resize(function(){ 
    toggleClass(); 
}); 

Answer 3

может быть лучше использовать css медиа-запросы ...

@media screen and (max-width: 500px){ 
 
    .desktop { 
 
     width: or another rules... 
 
    } 
 
}

Answer 4

Вы всегда можете добавить событие один раз при изменении размера, а затем инициировать событие изменения размера. Я добавил пространство имен в событие, чтобы он не конфликтует с другими событиями изменения размера окна при его запуске.

$(window).on('resize.load', function() { 
    var isMobile = $(window).width() < 500; 
    $("nav").toggleClass("mobile", isMobile).toggleClass("desktop", !isMobile); 
}).trigger('resize.load'); 

https://jsfiddle.net/r6myh0z8/