2

サーバーに ajax リクエストを送信します。次に、オブジェクトを受け取ります。オブジェクトは次のようになります。

{
    "payload": {
        "result": [
            "http://example.com/img1.jpg",
            "http://example.com/img2.jpg",
            "http://example.com/img3.jpg",
            "http://example.com/img4.jpg",
            "http://example.com/img5.jpg"
        ]
    }
}

次に、for ループを使用してオブジェクトをトラバースします。

if (typeof response.payload.result == 'object') {
    var ln = response.payload.result.length;
    var i;
    if (ln > 0) {
        for (i = 0; i < ln; i++) {
              /* this shows i was increased for every iteration */
              console.log(i);
          var current_img = response.payload.result[i];
          var img = $("<img />").attr('src', current_img)
           .load(function () {
                  console.log(i);
                  /* this logs the last iteration 4 times */
                $("#product-images").append(img);
          });
        }
    }
}

私の問題は、（1）画像要素のみが作成されていることです。このコードの実行後に DOM に追加される単一の要素は、配列の最後の要素の値です。jQuery.load()最後の反復でのみ呼び出されるのはなぜですか?

4

2 に答える 2

2 
if (typeof response.payload.result == 'object') {
    var ln = response.payload.result.length;
    var i;
    if (ln > 0) {
        for (i = 0; i < ln; i++) {
            (function (n) {
                var current_img = response.payload.result[i];
                var img = $("<img />").attr('src', current_img)
                    .load(function () {
                    console.log(n);
                    $("#product-images").append(img);
                });
            })(i);
        }
    }
}
于 2013-06-22T18:16:00.627 に答える
0

この行のセミコロンを見逃していると思います

var img = $("<img />").attr('src', current_img)

画像をロードする要素のセレクターを指定していません。

于 2013-06-22T18:19:14.907 に答える