如何在 imagesLoaded 回调函数中使用变量？

Question

我正在尝试做一些非常简单的事情，但我显然做错了什么。这是代码：

var targets = Array(
    $('.someDiv'),
    $('.myDiv')
    );
// This "for" loop check if the Class exists and if so it runs a code
for (var i = targets.length - 1; i >= 0; i--) {
    // make the target a jQuery object
    var $target = targets[i];
    // if the target exists
    if ( $target.length > 0 ) 
    {
        console.log($target);
        // run some code after every image is loaded
        $target.imagesLoaded( function()
        {
            console.log($target);
            $target.addClass('blue');
        });
    }
}

这不知何故不起作用。 JsFiddle 示例是 here

如果不破解 imagesLoaded 插件就不可能传递变量吗？还是我遗漏了什么？

Answer 1

好消息：您的代码有效！

var myVar;
$('.myDiv').imagesLoaded( function() {
    console.log(myVar);
});

myVar 是 undefined 因为你没有定义它。

...尝试var myVar = "Hello World";

Answer 2

如果您希望变量保留调用 imagesLoaded() 时的值，您可以使用 IIFE：

var myVar = 'someContent';

(function(myVar) {
    $('.myDiv').imagesLoaded( function() {
        console.log(myVar);
    });
})(myVar);

举个例子：

var myVar = 'some content';

(function(myVar) {
    setTimeout(function() {
        console.log(myVar);
    }, 1000);
})(myVar);

myVar = 'some other content';
console.log(myVar);

它将记录 some other content，稍后 some content，与初始值一样。

Answer 3

问题是 imagesLoaded 回调被触发在您已经迭代了元素之后。这意味着在触发第一个回调时，$target 是对数组中最后一个元素的引用。

幸运的是，因为您只是想获取对调用 imagesLoaded 的元素的引用，您可以使用 this.

获取对它的引用

Updated Example

var targets = [$('.someDiv'), $('.myDiv')];

for (var i = 0; i < targets.length; i++) {
    var $target = targets[i];

    if ($target.length) {        
        $target.imagesLoaded(function () {
            $(this).addClass('blue');
        });
    }
}

或者，您也可以使用 $.each() 函数来存储每次迭代的上下文：

Updated Example

var targets = [$('.someDiv'), $('.myDiv')];

$.each(targets, function (i) {
    var $target = targets[i];

    if ($target.length > 0) {
        $target.imagesLoaded(function () {
            $target.addClass('blue');
        });
    }
});

如何在 imagesLoaded 回调函数中使用变量？

How to use variables in imagesLoaded callback function?

javascript

variables

scope

imagesloaded