Home>

There is such a demand in recent projects,Click on six continents,Some corresponding request information appears,Shown below,When requested,You do n’t need to request it again for the second click.How do you write it in code?Below we lead everyone to understand

There is such a demand today,Click on six continents,Some corresponding request information appears,Shown below,After the pull request,No need for a second click.

As shown in the figure:Click on some of the requested data below North America

HTML code structure:

<div>
  <div data-name="beimeizhou">
    <a href="javascript:void (0)">North America</a>
    <div></div>
  </div>
  <div data-name="nanmeizhou">
    <a href="javascript:void (0)">South America</a>
    <div></div>
  </div>
  <div data-name="ouzhou">
    <a href="javascript:void (0)">Europe</a>
    <div></div>
  </div>
  <div data-name="feizhou">
    <a href="javascript:void (0)">Africa</a>
    <div></div>
  </div>
  <div data-name="yazhou">
    <a href="javascript:void (0)">Asia</a>
    <div></div>
  </div>
  <div data-name="dayangzhou">
    <a href="javascript:void (0)">Oceania</a>
    <div></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 Yahei "}
.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":[
    "Requested 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",    "Requested json data 8"
  ],  "feizhou":[
    "Requested json data 9",    "Requested json data 10",    "Requested json data 11",    "Requested json data 12"
  ],  "yazhou":[
    "Requested json data 13",    "Requested json data 14"
  ],  "dayangzhou":[
    "Requested json data 15",    "Requested json data 16"
  ]
}

js code:

$(document) .ready (function () {
  //Add map
  var stautearr={
      "beimeizhou":"true",      "nanmeizhou":"true",      "ouzhou":"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 (data) {
        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,Please check the network ");
      }
    });
  });
});
  • Previous C # socket communication usage examples
  • Next ASP definition array method skills