編寫以下jquery的更好方法

Question

我對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

也許更好地使用CSS媒體查詢...

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

Answer 3

您可以將其設置為一個單獨的函數，以對其進行清理：

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

您始終可以在調整大小后添加一次事件，然后觸發調整大小事件。 我向事件添加了名稱空間，以便在觸發它時不會與任何其他窗口調整大小事件發生沖突。

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

https://jsfiddle.net/r6myh0z8/