访问函数逻辑之外的变量

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

我想在此函数之外访问这两个变量（menuHeight、contactHeight），以便在其他地方使用。我正在测量模态的顶部高度，但它不是对调整大小做出响应，而不仅仅是加载（在这种情况下，似乎一个简单的 If/Else 可以工作。）我可能需要对这里的范围进行一些教育。谢谢！！

Answer 1

您需要在之前定义它们：

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

你可以使用一个函数：

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

用于全球访问（不推荐）

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

Answer 2

您在函数之外定义它们。此外，由于load 在页面加载过程中发生得相当晚，因此您需要主动初始化它们，然后更新它们以响应load 和resize。这表明您需要一个可重用的功能：

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

如果您的代码还没有在作用域函数中，您可能希望将它放在一个中：

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

...因为全局变量是一件坏事™。 :-)

你会看到人们告诉你继续挂钩事件，然后手动触发它：

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

我不是粉丝。如果需要调用函数，直接调用即可。