如何在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的例子是

是不是不可能在不破解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获得对它的引用。

更新示例

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()函数来存储每次迭代的上下文：

更新示例

var targets = [$('.someDiv'), $('.myDiv')];
$.each(targets, function (i) {
    var $target = targets[i];
    if ($target.length > 0) {
        $target.imagesLoaded(function () {
            $target.addClass('blue');
        });
    }
});