ссылка изнутри функции на глобальную переменную, хранящую возвращенный объект jQuery

#jquery #scope

#jquery #область видимости

Вопрос:

Хорошо, я знаю, что здесь происходит что-то простое, чего мне не хватает, все, что я пытаюсь сделать, это сохранить объект, возвращенный из запроса 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>

Ответ №1:

var globalMainImage = $("#mainImage"); находится за пределами document.ready, элемент не’ существует на момент выполнения этого кода.

Сделайте это:

 var globalMainImage

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

1. 1. globalInteger также находится за пределами document.ready, так почему на globalInteger можно ссылаться в document.ready просто отлично?

2. Кроме того, я установил точки останова, и globalMainImage, похоже, существует как объект jQuery при выполнении document.ready.

3. Аааа, неважно. Сам <body> не существует, поэтому jQuery возвращает нулевой объект, из-за чего вызовы метода против него завершаются неудачей.

Ответ №2:

Это потому, что он вычисляет это до того, как документ будет готов. Это должно быть внутри document.ready().

1. Но если я объявлю ее в document.ready, то она станет переменной с локальной областью действия, недоступной для любых других функций.

2. Вы можете определить ее вне document.ready, чтобы она была глобальной и к ней мог получить доступ любой пользователь. Просто назначьте ее внутри document.ready, чтобы у нее было значение. Вы не можете назначить его, когда элемент еще не существует. Вот почему вам нужно подождать, пока он не будет готов. В этом весь смысл document.ready.

3. Ответ: объявите переменную globalMainImage = null; перед document.ready, затем установите ее значение в document ready.

4. Точно! Это вас исправит.