Question

我坚持理解每个循环的行为。

这是我的代码：

$.each(thumbs, function() {    // where thumbs is array of strings
    project = this;

    $('#gallery').append(
        '<li>'
      + '<a href="/portfolio/' + project + '">'
      + '<img src="/img/' + project + '_bw.jpg" id="' + project + '_bw" />'
      + '<img src="/img/' + project + '_tn.jpg" id="' + project + '_tn" />'
      + '</a>'
      + '</li>'
    );

    // alert(project); - alerts every element of array as expected

    $('#' + project + '_bw').load(function() {

        // alert(project); - alerts only the last element of array, 
        // but as many times as many elements in array

        $('#' + project + '_bw').fadeIn(150,function(){
            $('#' + project + '_tn').css("opacity", 1);
        });
    });
});

问题是，当我试图定义元素的id时，我想执行.load函数，它只将这个函数附加到我循环的数组的最后一个元素。

Answer 1

您的问题是project的范围是在每个循环之外定义的。

因此，所有thumbs都会循环播放，并设置加载侦听器。但是，在调用第一个load事件并调用load listener函数时，project变量将设置为循环的最后一个值。

所以你需要做的是在每个循环中设置一个局部变量来为每次迭代设置变量。

试试这个：

<强>的Javascript

$.each(thumbs, function () {
    var thisProject = this;

    $('#gallery').append(
        '<li>' + '<a href="/portfolio/' + thisProject + '"><img src="/img/' + thisProject + '_bw.jpg" id="' + thisProject + '_bw" /><img src="/img/' + thisProject + '_tn.jpg" id="' + thisProject + '_tn" /></a></li>');

    $('#' + thisProject + '_bw').load(function () {
        $('#' + thisProject + '_bw').fadeIn(150, function () {
            $('#' + thisProject + '_tn').css("opacity", 1);
        });
    });
});

以下是问题的一个示例：

<强> HTML

<div id="output"></div>

<强>的Javascript

var count = 0;
$.each([500,1000,1500,2000,2500], function() {
    var thisValue = this;
    var inScopeCount = count + 1;
    setTimeout(function() {
        $('#output').append('<strong>For ' + thisValue + ':</strong><br />count: ' + count + '<br /> inScopeCount: ' + inScopeCount + '<br />');
    }, this);
    count += 1;
});

<强> Demo

jQuery的每个循环

1 个答案: