1

我在 php 文件中有地址列表，这些文件按国家/地区标记。因此，在一个名为 uk 的列表中，我可以有 12 个地址列表项。但是在我的主页上，我尝试使用 jQuery 计算每个国家/地区的值，然后将值放在该国家/地区地图上的 div 中，以表明英国是 x 个地址，美国有 x 个地址等等。

我在下面汇总的代码一直有效到 .ajax，然后在 console.log 中它回显 1 个国家而不是国家列表。

HTML

<div class="right map">
    <div class="canada" data-name="Canada"></div>
    <div class="usa" data-name="USA"></div>
    <div class="uk" data-name="UK"></div>
    <div class="ireland" data-name="Ireland"></div>
    <div class="spain" data-name="Spain"></div>
    <div class="portugal" data-name="Portugal"></div>
    <div class="italy" data-name="Italy"></div>
    <div class="australia" data-name="Australia"></div>
</div>

jQuery

$('.map div').each(function() { 
    $this = $(this);
    country = $this.attr("class");
    console.log(country);
    $.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : function (data) {
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());
            }
        }); 
});

.php 文件

<ul>
    <li>
        <strong>Company Name</strong>
        123 Fake Street<br />
        Fakesville<br />
        <a href="#">Link</a>
    </li>
    <li>
        <strong>Company Name</strong>
        123 Fake Street<br />
        Fakesville<br />
        <a href="#">Link</a>
    </li>
</ul>

控制台日志

canada
usa
uk
ireland
spain
portugal
italy
australia
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
[div.australia]
4

3 回答 3

3

您遇到的问题不在您的职能country范围内。success当你的success函数被调用时，它会查找作用域链来查找country。但是因为你的 AJAX 是异步运行的，所以循环总是在success被调用之前完成，country因此总是在循环中设置的最后一个国家。

要解决此问题，您需要将success函数嵌套在新的作用域级别中并按country值传递。在下面的示例中，我使用一个立即执行的函数来完成此操作，该函数返回您的原始success函数：

改变这个：

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : function (data) {
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());
            }
        });

对此：

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
            success : (function (country) {
                return function(data) {
                    console.log($('.map div.'+country));
                    $('.map div.'+country).text($(data).find('li').size());
                };
            })(country)
        });

这都是关于闭包的。

于 2013-01-29T08:42:45.297 回答
1

使您的 ajax 请求同步。添加async: false将起作用。它将等待当前的 ajax 请求完成，然后再开始另一个。所以对的引用country将正确映射到正确的国家div

$('.map div').each(function() { 
$this = $(this);
country = $this.attr("class");
console.log(country);
$.ajax({
    url : "/assets/inc/coe/"+country+".php",
    async: false,
        success : function (data) {
            console.log($('.map div.'+country));
            $('.map div.'+country).text($(data).find('li').size());
        }
    });

});

于 2013-01-29T08:35:58.227 回答
0

这是一个闭包问题和ajax的异步性；它处理了击败所有ajax调用的国家变量，所以它总是在最后一个设置（澳大利亚）。

将新属性写入 ajax 函数/对象

$.ajax({
        url : "/assets/inc/coe/"+country+".php",
        country: country,
            success : function (data) {
                var country = this.country;
                console.log($('.map div.'+country));
                $('.map div.'+country).text($(data).find('li').size());

            }
        });
于 2013-01-29T08:36:29.557 回答