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 部分更新。我认为这与 ajax 与循环交互不佳有关，因为this在 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 个不同的请求，这不是很优雅。

您应该考虑创建一个新的 cat_url.php，它将接收一个或多个 id 并一次返回所有 URL。您还可以将 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 回答