accès à l'extérieur variable de la fonction logique

Question

$(window).on("load resize", function() { 
     if ($(window).width() < 768) { 
      menuHeight = '0px'; 
      contactHeight = '100%'; 
     } else { 
      menuHeight = ($('#desktop-menu').height() + 'px').toString(); 
      contactHeight = ($('.get-in-touch-home').outerHeight() + 'px').toString(); 
     } 
    }); 

Je veux accéder à ces deux variables (menuHeight, contactHeight) en dehors de cette fonction à utiliser ailleurs. Je mesure la hauteur supérieure pour un modal, mais wan't à être réactif sur Redimensionner, non seulement la charge (il semble simple Si/Sinon travailler serait ce cas.) Je pourrais avoir besoin d'études sur la portée ici. Merci!!

Answer 1

Vous devez les définir avant:

var menuHeight = ''; 
var contactHeight = ''; 

$(window).on("load resize", function() { 
    if ($(window).width() < 768) { 
     menuHeight = '0px'; 
     contactHeight = '100%'; 
    } else { 
     menuHeight = ($('#desktop-menu').height() + 'px').toString(); 
     contactHeight = ($('.get-in-touch-home').outerHeight() + 'px').toString(); 
    } 
}); 

Vous pouvez utiliser une fonction:

function scroll() { 
    var menuHeight; 
    var contactHeight; 

    if ($(window).width() < 768) { 
    menuHeight = '0px'; 
    contactHeight = '100%'; 
    } else { 
    menuHeight = ($('#desktop-menu').height() + 'px').toString(); 
    contactHeight = ($('.get-in-touch-home').outerHeight() + 'px').toString(); 
    } 

    getHeight(menuHeight,contactHeight) 

} 

function getHeight(menuHeight,contactHeight) { 
    console.log(menuHeight,contactHeight) 
} 

$(window).scroll(scroll); 

Pour un accès global (recommande pas)

window.menuHeight = ''; 
window.contactHeight = ''; 

Answer 2

Vous les définir en dehors de la fonction. En outre, depuis load arrive assez tard dans le processus de chargement de la page, vous aurez envie de les initialiser de manière proactive, puis les mettre à jour en réponse à load et resize. Que vous suggère voulez une fonction réutilisable:

var menuHeight;       // Defining... 
var contactHeight;       // ...them 
grabHeights();        // Proactive 
$(window).on("load resize", grabHeights); // And on events 

function grabHeights() { 
    if ($(window).width() < 768) { 
     menuHeight = '0px'; 
     contactHeight = '100%'; 
    } 
    else { 
     menuHeight = ($('#desktop-menu').height() + 'px').toString(); 
     contactHeight = ($('.get-in-touch-home').outerHeight() + 'px').toString(); 
    } 
} 

Si votre code n'est pas déjà en fonction de la portée, vous voudrez probablement mettre dans un:

(function() { 
    var menuHeight; 
    var contactHeight; 
    grabHeights(); 
    $(window).on("load resize", grabHeights); 

    function grabHeights() { 
     if ($(window).width() < 768) { 
      menuHeight = '0px'; 
      contactHeight = '100%'; 
     } 
     else { 
      menuHeight = ($('#desktop-menu').height() + 'px').toString(); 
      contactHeight = ($('.get-in-touch-home').outerHeight() + 'px').toString(); 
     } 
    } 
})(); 

... depuis GLOBALS sont Bad Thing ™. :-)

Vous verrez des gens vous dire juste aller de l'avant et accrochez l'événement, puis déclencher manuellement:

$("selector").on("event", function() { 
    // ... 
}).triger("event"); 

Je ne suis pas fan. Si vous devez appeler une fonction, appelez-la.