3

次のような動的に生成されたオブジェクトがあります。

colorArray = { 
    AR: "#8BBDE1", 
    AU: "#135D9E", 
    AT: "#8BBDE1",
    ... }

プラグインの呼び出し中にこのプラグインと 'colors' 属性を使用して、マップを色付けするために使用しようとしています。このような：

$('#iniDensityMap').vectorMap({
    backgroundColor: '#c2e2f2',
    colors: colorArray,
    ... (some other params)
});

しかし、国では色がつきません。これをハードコーディングするとうまく動作しますが、このプロジェクト用に動的に生成する必要があるため、このようなものは機能しません (実際にはマップに色を付けます):

$('#iniDensityMap').vectorMap({
    backgroundColor: '#c2e2f2',
    colors: { AR: "#8BBDE1", AU: "#135D9E", AT: "#8BBDE1" },
    ... (some other params)
});

問題をプラグインまで十分に追跡したところ、このループと関係があることがわかりました。

setColors: function(key, color) {
  if (typeof key == 'string') {
    this.countries[key].setFill(color);
  } else {

    var colors = key; //This is the parameter passed through to the plugin

    for (var code in colors) {

      //THIS WILL NOT GET CALLED

      if (this.countries[code]) {
        this.countries[code].setFill(colors[code]);
      }
    }
  }
},

colorArrayまた、プラグインの外で、自分でオブジェクトを反復処理しようとしましたが、同じ問題が発生しています。for ( var x in obj )の内部にあるものはすべて起動していません。undefinedcolorArray.lengthを返すことにも気付きました。もう 1 つの重要な注意点は、別の呼び出しでインスタンス化して、グローバル スコープにあり、操作できるようにすることです。var colorArray = {};

問題は次のいずれかだと思います。

  1. オブジェクトを動的に設定する方法 - colorArray[cCode] = cColor;(jQuery .each 呼び出しで)
  2. javascript の Arrays() と Objects() の違いをもう一度混乱させています
  3. それはおそらくスコープの問題ですか？
  4. 上記のすべての組み合わせ。

編集 #1: Firebug のコンソール内のオブジェクトに関する追加の質問を新しい投稿HEREに移動しました。その質問は、私がここで尋ねている根本的な JS の問題よりも Firebug をより具体的に扱っています。

編集＃2：追加情報 オブジェクトを動的に設定するために使用しているコードは次のとおりです。

function parseDensityMapXML() {
$.ajax({
    type: "GET",
    url: "media/XML/mapCountryData.xml",
    dataType: "xml",
    success: function (xml) {
        $(xml).find("Country").each(function () {
            var cName = $(this).find("Name").text();
            var cIniCount = $(this).find("InitiativeCount").text();
            var cUrl = $(this).find("SearchURL").text();
            var cCode = $(this).find("CountryCode").text();

            //Populate the JS Object
            iniDensityData[cCode] = { "initiatives": cIniCount, "url": cUrl, "name": cName };
            //set colors according to values of initiatives count
            colorArray[cCode] = getCountryColor(cIniCount);
        });
    }
});
} //end function parseDensityMapXML();

この関数は、ページ上の別の場所にあるチェックボックスのクリック イベントで呼び出されます。オブジェクトiniDensityDataとcolorArrayは、html ファイルの head で宣言されています - それらがグローバル スコープ内に保持されることを期待しています:

<script type="text/javascript">
    //Initialize a bunch of variables in the global scope
    iniDensityData = {};
    colorArray = {};
</script>

最後に、読み取られている XML ファイルのスニペットを次に示します。

<?xml version="1.0" encoding="utf-8"?>
<icapCountryData>
  <Country>
    <Name>Albania</Name>
    <CountryCode>AL</CountryCode>
    <InitiativeCount>7</InitiativeCount>
    <SearchURL>~/advance_search.aspx?search=6</SearchURL>
  </Country>
  <Country>
    <Name>Argentina</Name>
    <CountryCode>AR</CountryCode>
    <InitiativeCount>15</InitiativeCount>
    <SearchURL>~/advance_search.aspx?search=11</SearchURL>
  </Country>
  ... and so on ...
</icapCountryData>
4

1 に答える 1

3

解決しました！もともと、関数を呼び出していたparseDensityMapXML()直後にloadDensityMapXML()、最初の関数で動的に作成されたオブジェクトを取得して反復する別の関数を呼び出しました。問題は、最初の関数からコールバックとして呼び出されなかったため、オブジェクトが構築される前に起動していたことです。

修正するために、上記の最初の関数を修正して、.each()がオブジェクトの作成を完了した後に 2 番目の関数を呼び出すようにしました。

function parseDensityMapXML() {
$.ajax({
    type: "GET",
    url: "media/XML/mapCountryData.xml",
    dataType: "xml",
    success: function (xml) {
        $(xml).find("Country").each(function () {
            var cName = $(this).find("Name").text();
            var cIniCount = $(this).find("InitiativeCount").text();
            var cUrl = $(this).find("SearchURL").text();
            var cCode = $(this).find("CountryCode").text();

            //Populate the JS Object
            iniDensityData[cCode] = { "initiatives": cIniCount, "url": cUrl, "name": cName };
            //set colors according to values of initiatives count
            colorArray[cCode] = getCountryColor(cIniCount);
        });

        /* and then call the jVectorMap plugin - this MUST be done as a callback
           after the above parsing.  If called separately, it will fire before the
           objects iniDensityData and colorArray are created! */
        loadDensityMapXML();
    }
});
} //end function parseDensityMapXML();
于 2012-08-01T18:32:10.477 に答える