Ajax request JSON data case detailed _AJAX related

Today there is such a demand, click on six continents, there are some corresponding request information, shown below, request request, the second click will not need to request.
As shown in the picture: Click on some of the data that appears below North America

HTML code structure:

<div class= "Consixmap" > <div class= "name conmap01" data-name= "Beimeizhou" > <a href= "javascript:void" ( 0) "> North America </a> <div class=" Condetail "></div> </div> <div class=" name conmap02 "Data-nam E= "Nanmeizhou" > <a href= "javascript:void (0)" > South America </a> <div class= "Condetail" ></div> &L
    t;/div> <div class= "name conmap03" data-name= "Ouzhou" > <a href= "javascript:void (0)" > Europe </a>  <div class= "Condetail" ></div> </div> <div class= "name conmap04" data-name= "Feizhou" > <a href= "javascript:void (0)" > Africa </a> <div class= "Condetail" ></div> </div> <div class= "n Ame conmap05 "data-name=" Yazhou "> <a href=" javascript:void (0) "> Asia </a> <div class=" Condetail "> </div> </div> <div class= "name conmap06" data-name= "Dayangzhou" > <a href= "javascript:void (0)" > Oceania </a> &LT;div class= "Condetail" ></div> </div> </div> 

 

CSS style:

. consixmap{position:relative;width:678px;height:335px;margin:0 Auto;background:url (... /images/tuanduimapbg.png) No-repeat;color: #000; font-family: "Microsoft Ya Hei"} consixmap. Name. Condetail{display:none; Position:absolute;z-index:10;width:216px;padding:10px;left:50%;margin-left:-118px;top:54px;background:url (..
/images/opcity83.png) repeat;border-radius:5px;} . Consixmap. Condetail span{display:block;color: #fff; font-size:14px;text-align:left; consixmap. Name{position:
absolute;width:52px;height:55px;} . consixmap. Name A{display:block;z-index:2;position:absolute;padding-top:35px;text-align:center;cursor:pointer;
Width:52px;height:20px;color: #000; font-size:12px;} . Consixmap. conmap01{left:91px;top:73px. Consixmap. Conmap01 A{background:url (.
/images/beimeipicbg.png) no-repeat top center; . consixmap. conmap02 {left:180px;top:213px; consixmap. Conmap02 A{background:url (.
/images/nanmeimapbg.png) no-repeat top center; . consixmap. conmap03 {left:339px;top:68px; consixmap. CONMAP03 a{background:uRL (..
/images/ouzhoumapbg.png) no-repeat top center; . Consixmap. conmap04{left:327px;top:158px. Consixmap. Conmap04 A{background:url (.
/images/feizhoumapbg.png) no-repeat top center; . consixmap. conmap05 {left:480px;top:75px; consixmap. Conmap05 A{background:url (.
/images/yazhoumapbg.png) no-repeat top center; . consixmap. conmap06 {left:545px;top:220px; consixmap. Conmap06 A{background:url (. /images/dayangmapbg.png) no-repeat top center;

JSON format:

{
  "Beimeizhou": [
    Request JSON data 1,
    requested JSON data 2
  ],
  "Nanmeizhou": [
    "Requested JSON data 3",
    " Requested JSON data 4 "
  ],
  " Ouzhou ": [
    " requested JSON data 5 ",
    " requested JSON data 6 ",
    " requested JSON data 7 ",
    " JSON data requested 8 "
  ],
  "Feizhou": [
    Request JSON Data 9, "
    requested JSON data",
    "JSON data requested",
    "JSON data requested"
  ] ,
  "Yazhou": [JSON
    Data requested,
    requested JSON data
  ],
  "Dayangzhou": [
    "requested JSON data",
    "Requested JSON data"
  ]
}

JS Code:

$ (document). Ready (function () {//Add map var stautearr={' Beimeizhou ': ' true ', ' Nanmeizhou ': ' true ', ' Ouz
  Hou ': ' true ', ' Feizhou ': ' true ', ' Yazhou ': ' true ', ' Dayangzhou ': ' true '};
    $ (". Consixmap. Name"). On (' click ', function () {var _this=this;
    var htmlcon= "";
    $ (this). Siblings (". Name"). Children (". Condetail"). fadeout (500);
    $ (this). Children (". Condetail"). FadeIn (500);
     var _name=$ (this). attr (' Data-name '); $.ajax ({url: ' Js/schoolmap.json ', type: ' Get ', data:{}, DataType: ' JSON ', Success:function (da TA) {for (var i in data) {if (_name==i && stautearr[i]== ' true ') {for (Var j=0;j<data
            [i].length;j++) {htmlcon+= "<span>" +data[i][j]+ "</span>";
            } $ (_this). Children (". Condetail"). Append (Htmlcon);
          Stautearr[i]= ' false ';
      }}, Error:function () {alert (' request failed, check network '); }
    });
  }); });