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>

console.log

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 に答える