Question

我正在研究交互式美国地图的概念验证。当用户单击状态形状时，有关该特定状态的文本信息应显示在地图下方的div中。我有一个包含两个SVG形状的html文件，一个JS文件和一个当前包含数组的JSON文件。我希望这个地图如何工作：当用户点击形状时，形状的ID被传递给getJSON函数，其键/索引与该ID匹配的对象将是唯一检索的对象来自JSON，最终显示在地图下方的div中。

目前，在我的getJSON函数中，我使用的是$ .each（data.items，function（key，val）），但问题是控制台显示该键实际上是由于数组引起的索引在我的JSON文件中。在我的项目的先前版本中，我使用键（没有数组）在普通对象形式中格式化我的JSON。我使用.html（）和.append（）返回其键与形状匹配的对象＆＃ 39; s;但是，问题在于我必须在下面的val.state之前的＆f; f＆＃39;中进行硬编码：

$("#txtDOT").html("<p id='state " + key + "'>" + val.state + "'</p>")//quotes fixed

我是否要将数组包含在我的JSON中。请告知如何将点击的形状ID传递给getJSON函数，以及如何将其键或索引与形状ID匹配的特定对象置零。我的代码的当前版本如下：

HTML显示一个状态形状和脚本标记：

<div class="svg-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="546.411px" height="328.782px" viewBox="0 0 546.411 328.782" style="enable-background:new 0 0 546.411 328.782;"
 xml:space="preserve" class="svg-content">
<g id="fl" data-key="fl">
    <polygon id="flPolygon" style="fill:#3E7AAC;stroke:#1A171B;stroke-width:0.5;stroke-miterlimit:10;" points="406.029,254.818..."/>
    <text id="flLetters" transform="matrix(1.0127 0 0 1 443.8125 272.377)" style="fill:#3E7AAC;stroke:#1A171B;stroke-width:0.5;stroke-miterlimit:10; font-family:'ArialMT'; font-size:6.19;">FL</text>
    </g>
</svg>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="exploreMap.js"></script>

JS all：

$(document).ready(function(){

   var items = [];

   $.getJSON("stateInfoList.json", function( data ) {
        console.log ( data );//whole JSON object

      $("g").on("click", function (e) {
        console.log(this.id);
        var $e = $(e.currentTarget);//target should be clicked shape but I can't tell yet
        //clicked.css("background", "blue");//clicked is not defined yet


        $.each ( data.items, function( key, val ){
          console.log ( key, val );//key is "01", val is whats inside json's { }s

          items.push( "<p id='state " + key + "'>" + val.state + "<p id='contacts'>" + val.contacts + "'</p></p>");
           console.log( "<p id='state " + key + "'>" + val.state + "<p id='contacts'>" + val.contacts + "'</p></p>");

              //add all <p> items to a <ul>
              $( "<ul>", { //later, style="display:none";>
                    "class": "my-new-list",

                     html: items.join( "" ) //this joins all or **selected element(s)** back into a ~nonformatted~ string.//join method only works with arrays, not jquery objects.

              }).appendTo( "#txtDOT" );//

                //jQuery Selector $() function w optional 2nd parameter to do a search within an event handler
                $("p").on("click", function (e) {//Using e is just a short for event. You can pass any variable name you desire.
                    var $e = $(e.target);//target is #txtDOT
                    clicked.css("background", "red");
                });

        });                         

      });

   });

});

//If I use plain object instead of array, this might work:
//$("#txtDOT").html("<p id='state " + key + "'>" + val.state + "'</p>"); 
//$("#txtDOT").append("<p id='contacts'>" + val.contacts + "'</p>");

全部JSON：

{
  "items": [

    {
    "abv": "nh",
    "state": "NEW HAMPSHIRE DEPARTMENT OF TRANSPORTATION",
    "contacts": "Concrete Admixtures (CADD) \nBob Real, Research Supervisor/QPL, 555-555-5555, breal@dot.state.nh.us \n\nConcrete Curing Compounds (CCC) \nBob Real, Research Supervisor/QPL, 555-555-5555, breal@dot.state.nh.us"
    },
    {
    "abv": "fl",
    "state": "FLORIDA DEPARTMENT OF TRANSPORTATION",
    "contacts": "Concrete Admixtures (CADD)\nJane Smith, Product Evaluation Administrator, 999-999-9999, jane.smith@dot.state.fl.us\n\nHot-Mix Asphalt Crack Sealers (HMA CS)\nKaren Brown, Product Evaluation Administrator, 999-999-9990, karen.brown@dot.state.fl.us"
    } 

  ]
}

谢谢， LB

Answer 1

解决方案：我将JSON格式化为普通对象。在我的.each()方法下，我将val存储在变量中，然后使用if else语句将JSON中的键与点击的形状ID相匹配。无需将数据索引属性添加到内联html或使用.index()方法。

将点击的元素的ID与json中的键匹配

1 个答案: