编写以下jquery的更好方法

Question

Im quite new to javaScript/jquery. I wrote the following code to toggle a mobile Navigation but i am quite sure there is a simple way to combine the to following code blocks. i would appreciate advice how to write this a better, sleeker way. Thanks

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

Simply create a single function and call it twice:

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

maybe better use css media queries...

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

Answer 3

You can make it into a separate function which will clean it up a bit:

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 4

You can always add the event once on resize then trigger the resize event. I added a namespace to the event so that it will not conflict with any other window resize events when we trigger it.

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

https://jsfiddle.net/r6myh0z8/