访问 $(document).ready() & 之外的变量jQuery

Question

所以我有一个 .js 文件包含在我的 html 中

如果我把它放在我的 .js 文件中，

$(document).ready(function(){    
      var siteRoot = $('.site-root').val();
      alert(siteRoot);
});

代码会正确地警告该值，但如果我这样做：

var siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(siteRoot);
});

它会警告未定义，而不是

有没有办法拥有这样的东西在 $(document).ready() 中访问其外部的变量，因为如果我将变量放入 $(document).ready() 中，则其他变量将无法访问js 文件

Answer 1

您可以将其设置为全局：

// this is the same as your example, 
// just wanted to stress that it's a part of the window (global) object
window.siteRoot = $('.site-root').val();
$(document).ready(function(){
      alert(window.siteRoot);
});

或者更好的是，使用某种名称空间，如下所示：

var MyData = {};
MyData.siteRoot = $('.site-root').val();

$(document).ready(function(){
  alert(MyData.siteRoot);
});

Answer 2

执行此操作的最佳方法基本上是创建一个空的全局变量或创建一个命名空间来存储变量。然后在 document.ready 中只需将 $('.site-root').val() 添加到该变量即可。

var siteRoot = '';

$(document).ready(function(){    
      siteRoot = $('.site-root').val();
      alert(siteRoot);
});

这样，您可以在知道 .site-root 存在并且在整个应用程序中全局可用后设置 siteRoot 变量。

Answer 3

变量可以在$(document).ready()中使用，因为它是全局变量，但是您可能会得到undefined，因为没有值在文档准备好之前可用于.siteRoot，只需尝试以下操作：

var siteRoot = "blahblah";
$(document).ready(function(){
      alert(siteRoot);
});

现在，如果您希望该变量可以全局使用并立即使用< /em> 在你的应用程序的其他部分，你必须重新设计您的解决方案，以便应用程序的其他部分也仅在 DOM 准备就绪时才使用它。

Answer 4

然而，您可以通过执行以下操作来共享：

$(document).ready(function(){
    window.siteroot = $('.site-root').val();
});

在您的应用程序中，您可以通过以下方式引用它：

if (typeof(window.siteroot) !== "undefined") {
  //do this
}

您也可以延迟加载它：

window.get_siteRoot = function() {
   if (typeof(window.siteroot) !== "undefined")
      return window.siteroot;

   var val = $('.site-root').val();
   window.siteroot = val;
   return window.siteroot;
}

HTH。