从函数中引用存储返回的 jQuery 对象的全局变量答案

【问题标题】：referencing, from within a function, a global variable storing a returned jQuery object从函数中引用存储返回的 jQuery 对象的全局变量
【发布时间】：2011-05-20 01:00:07
【问题描述】：

好的，我知道这里有一些简单的事情我错过了，我要做的就是存储一个从 jQuery 查询返回的对象，例如

var obj = $("#objectID");

作为全局 vand，然后从函数中引用它。

下面的示例提供了一张狗的图片，然后使用 jQuery 交换图片的 src 属性以显示一只猫。我错过了什么？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
    <head>
    <!-- jquery -->
    <script src="jquery-1.6.1.min.js" type="text/javascript" language="javascript"></script>
    <!-- image swap -->
    <script type="text/javascript" language="javascript">

    // a global jQuery object
    var globalMainImage = $("#mainImage");
    // a global integer
    var globalInteger = 420;

    $(document).ready(function() {
        /* this works
        $("#mainImage").hide();
        $("#mainImage").attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Youngkitten.JPG/800px-Youngkitten.JPG");
        $("#mainImage").fadeIn(1500); 
        */

        /* and this works
        var localMainImage = $("#mainImage");
        localMainImage.hide();
        localMainImage.attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Youngkitten.JPG/800px-Youngkitten.JPG");
        localMainImage.fadeIn(1500); 
        */

        /* and this works
        alert(globalInteger);
        */

        /* but this doesn't */
        globalMainImage.hide();
        globalMainImage.attr("src", "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Youngkitten.JPG/800px-Youngkitten.JPG");
        globalMainImage.fadeIn(1500);
    });
    </script>

    </head>
<body>
    <img id="mainImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/250px-YellowLabradorLooking_new.jpg" />     
</body>
</html>

【问题讨论】：

标签： jquery scope

【解决方案1】：

var globalMainImage = $("#mainImage"); 在 document.ready 之外，执行此代码时该元素不存在。

这样做：

var globalMainImage

$(document).ready(function() {
   globalMainImage = $("#mainImage");
}

【讨论】：

1. globalInteger 也在 document.ready 之外，那为什么 globalInteger 可以在 document.ready 中引用就好了呢？
另外，我设置了断点，当执行 document.ready 时，globalMainImage 确实作为 jQuery 对象存在。
啊，没关系。本身不存在，因此 jQuery 返回一个空对象，这就是针对它的方法调用失败的原因。

【解决方案2】：

那是因为它会在文档准备好之前进行计算。它需要进入 document.ready() 内部。

【讨论】：

但是如果我在 document.ready 中声明它，它就会变成一个局部范围的变量，对任何其他函数都不可用。
您可以在 document.ready 之外定义它，以便它是全局的并且可以被任何东西访问。只需在 document.ready 中分配它，它就有一个值。当元素尚不存在时，您无法分配它。这就是为什么你必须等到它准备好。这就是 document.ready 背后的重点。
答案：声明 var globalMainImage = null;在 document.ready 之前，然后在 document ready 中设置它的值。
没错！这会解决你的问题。