0

各ループの動作を理解するのに苦労しています。

これが私のコードです：

$.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);
        });
    });
});

問題は、.load 関数を実行したい要素の id を定義しようとしているときに、ループしている配列の最後の要素にのみこの関数をアタッチすることです。

4

1 に答える 1

1

あなたの問題は、スコープがproject各ループの外側で定義されていることです。

したがって、すべてthumbsがループされ、負荷リスナーが設定されます。しかし、最初のロード イベントが呼び出され、ロード リスナー関数が呼び出されるまでに、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;
});

デモ

于 2013-09-22T22:13:42.773 に答える