1

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

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 插件就不可能传递变量吗？还是我错过了什么？

4

3 回答 3

1

好消息：您的代码有效！

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

myVar就像undefined你没有定义它一样。

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

于 2015-11-26T17:46:27.023 回答
0

如果您希望变量保留调用 时的值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，就像初始值一样。

于 2015-11-26T18:04:07.867 回答
0

问题是在您已经迭代元素之后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');
        });
    }
});
于 2015-11-26T20:42:02.737 回答