3

私は次のjsスニペットを持っています：

cat_images = $(".category-description").next().find("img");
cat_images.each(function () {
    url = $(this).parent().attr("href");
    id = url.split("id=");
    id = id[1];
    url = "cat_url.php?i="+id;
    this_image = this;

    $.get (url, function (data) {
        $(this_image).attr("src", data);
    });
 });

現時点では、各ループによって繰り返される最後の要素のみがajax.getセクションによって更新されています。thisajax関数内で使用すると完全に失敗するため、ajaxがループとうまく相互作用しないことと関係があると思います。

とにかく、ajaxがJqueryで終了するのを待っている間にループを遅らせる方法はありますか？（通常のjsを混ぜたくない）

4

2 に答える 2

6

クロージャーの中に包んでみてください、

cat_images.each(function () {
    url = $(this).parent().attr("href");
    id = url.split("id=");
    id = id[1];
    url = "cat_url.php?i="+id;
    this_image = this;

    (function (this_image) {
      $.get (url, function (data) {
        $(this_image).attr("src", data);
      });
    })(this_image);
 });
于 2012-10-26T16:13:14.937 に答える
0

Vega のソリューションは正しく機能しているように見えますが、ロジックを少し変更することをお勧めします。

問題は、10 個の cat_images がある場合、10 個の異なる要求を行うことになり、あまりエレガントではないことです。

1 つ以上の ID を受け取り、一度にすべての URL を返す新しい cat_url.php を作成することを検討する必要があります。また、html 内の画像を cat_image として識別できるため、URL を JSON として返すときに、各 src を設定できます。

HTML スニペットは次のようになります。

<a href="url?id=1">
  <img src="..." id="cat_image1" rel="1" />
</a>

それがあなたの最後のjsスニペットになります：

var ids = [];
cat_images.each(function () {
  ids.push($(this).attr("rel"));
});

var data = "ids=" + ids;
$.get ({
  url: url,
  data: data,
  dataType: 'json',
  success: function (data) {
    for (var img in data.images) {
      $("#cat_image" + img.id).attr("src", img.url);
    };
  }
});

cat_images.php は、次のような JSON を返す必要があります。

{
  images: [
    {id: 1, url: 'url1.jpg'},
    {id: 2, url: 'url2.jpg'},
    {id: 3, url: 'url3.jpg'}
  ]
}
于 2012-10-26T18:40:57.563 に答える