javascript - 多个 JS 文件中的 JQuery 和变量

Question

我有引用 html ID 的变量，例如

<div data-role="footer" id="ftrPaxFlight">
    <h4>&#169; 2012, BT</h4>
</div>

我正在使用 jQuery 将 javascript 嵌入到 html 中，就像

<script>
  $(document).ready(function() {
            var ftrPaxFlight = $('#ftrPaxFlight');
    var butMainLogin = $('#butMainLogin');
    var butMainSetup = $('#butMainSetup'); 
       .....
      butMainLogin.bind("click", function() {
           getChangeFtr();
    });

其中 getChangeFtr 是位于外部 .js 文件中的函数。我想将逻辑与 UI 分开。该文件也包含在标签下

function getChangeFtr(){
     alert("Ftr will be changed " + ftrPaxFlight);
 }

单击按钮时..调用 getChangeFtr() 方法，出现错误

TypeError - ftrPaxFlight 未定义。

有人可以指导我使用 jQuery 将变量传递给多个 javascript 文件的正确方法吗？

Answer 1

有很多方法可以做到这一点，并且没有“正确的方法”。您可以使用全局变量、全局命名空间/单例，或者只是使用参数在函数之间传递对象。在你的情况下，我会使用参数：

function getChangeFtr( elem ){
    alert("Ftr will be changed " + elem);
}

和：

butMainLogin.bind("click",function() {
    getChangeFtr( ftrPaxFlight );
});

Answer 2

您的 ftrPaxFlight 变量在文档就绪函数的范围内声明。您需要在全局范围内声明它，以便您的全局方法访问该变量。

var ftrPaxFlight;
$(document).ready(function(){
    ftrPaxFlight = $('#ftrPaxFlight');
    //....etc
}

function getChangeFtr(){
    alert("Ftr will be changed " + ftrPaxFlight);
}

Answer 3

利用

var ftrPaxFlight = $('#ftrPaxFlight').val()

并声明

<script>
var ftrPaxFlight;
$(document).ready(function() { .......

作为全局前就绪功能。