Question

我正在尝试通过jQuery＆＃39; <div></div>填充.each个元素。元素如下：

<div id="failed" class="container" data-status="Fail"></div>
<div id="passed" class="container" data-status="Pass"></div>

jQuery如下：

$(document).ready(function () {
    var baseUrl = "http://some.thing.local",

    $(".container").each(function () {
        var context = $(this),
            data = {
                status: context.data("status")
            };

        // to call http://some.thing.local?status=(Pass|Fail)
        $.ajax({
            type: "GET",
            url: baseUrl,
            data: data
        }).success(function (html) {
            context.html(html);
        });
    });
});

页面加载和URL被适当调用（如在正确的URL中）但我最终在迭代的两个元素中使用相同的HTML。现在，我已阅读并研究过，我理解因为这些是异步调用，我基本上会覆盖我对最后完成的响应，这就是为什么它不起作用。

我只是想弄清楚最好的办法。如果有人有任何想法，如果你能引导我，我会非常感激。

Answer 1

似乎是一个范围问题。也许这会有所帮助：

$(document).ready(function () {
    var baseUrl = "http://some.thing.local",

    $(".container").each(function () {
        (function(scope) {
          var context = scope,
              data = {
                status: context.data("status")
              };

          $.ajax({
              type: "GET",
              url: baseUrl,
              data: data
          }).success(function (html) {
              context.html(html);
          });
        })($(this));
    });
});

Answer 2

这是因为回调是异步的，但是在调用回调之前，分配var context = $(this)是同步完成的。因此，context在最后一次迭代期间以及在使用最后一个值的所有剩余回调（仍然要执行）中结算为它的值。

你应该绑定这个上下文：

$(document).ready(function () {
    var baseUrl = "http://some.thing.local",

    $(".container").each(function () {
        var data = {
                status: context.data("status")
            };

        // to call http://some.thing.local?status=(Pass|Fail)
        $.ajax({
            type: "GET",
            url: baseUrl,
            data: data
        }).success(function (html) {
            this.html(html);
        }.bind($(this)));
    });
});

每个调用AJAX请求的jQuery

2 个答案: