Question

我有以下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与循环交互不良有关，因为在ajax函数中使用this会使其完全失败。

无论如何，在等待ajax在Jquery中完成时，有没有延迟循环？（宁愿不混合常规的js）

Answer 1

尝试将其包装在闭包中，

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

Answer 2

虽然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'}
  ]
}

每个循环中的ajax执行不正确

2 个答案: