根据shadowbox.js中的JVectormap区域显示不同的html内容

laximzn5 于 2022-12-16 发布在其他

关注(0)|答案(1)|浏览(91)

我用JVectorMap创建了一个世界Map，我想用Shadowbox.js打开一个盒子，显示每个突出显示的国家的各种信息--在这个例子中，它是中东和北非国家。
我需要帮助显示一个不同的消息取决于哪个突出显示的国家被点击-它目前是所有相同的消息。
到目前为止，我可以显示图像中突出显示的国家的html内容onclick：

下面是我的代码：

<div id="world-map" style="width: 600px; height: 400px"></div>
  <script type="text/javascript">

    $(function(){
      
      var codes = ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE']; // Regions in MENA
      
      $('#world-map').vectorMap({
        map: 'world_mill_en',
        zoomMax: 20,
        backgroundColor: '#505050',
        regionStyle: {
          initial: {
            fill: '#F6F5F4'
          },
          hover: {
            fill: '#F6F5F4',
            "fill-opacity": 1
          },
          selected: {
            fill: '#7B8B9B'
          },
          selectedHover: {
            cursor: 'pointer',
            fill: '#002142'
          }
        },
        selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
          
          if($.inArray(code,codes) > -1) {
            Shadowbox.open({ 
              content: '<p style="color: white; font-size: 16px;">CONTENT</p>',
              player:     "html",
              title:      "Middle East and North Africa",
              height:     400,
              width:      640
            });
          }
        }
      });
    });
    </script>

如果点击了国家“SA”，我如何更改内容？
任何帮助都很感激

Html

来源：https://stackoverflow.com/questions/74548336/display-different-html-content-dependant-on-jvectormap-region-in-shadowbox-js

1条答案

按热度按时间

rjee0c151#

为了帮助大家，我对数组中的每一项都使用了switch语句：

selectedRegions: ['DZ','EG','IR','IQ','IL','JO','KW','LB','LY','MA','OM','QA','SA','TN','AE','YE'], onRegionClick: function (event, code) {
          
          var codesInArray = $.inArray(code,codes);

          switch (codesInArray){
            case 0: //Algeria
              Shadowbox.open({ 
                content: '<p style="color: white; font-size: 16px;">ALGERIA</p>',
                player:     "html",
                title:      "Middle East and North Africa",
                height:     400,
                width:      640
            });
            break;

            case 1: //EGYPT
              Shadowbox.open({ 
                content: '<p style="color: white; font-size: 16px;">Egypt</p>',
                player:     "html",
                title:      "Middle East and North Africa",
                height:     400,
                width:      640
            });
            break; 

            case 2: //IRAN
              Shadowbox.open({ 
                content: '<p style="color: white; font-size: 16px;">iran</p>',
                player:     "html",
                title:      "Middle East and North Africa",
                height:     400,
                width:      640
            });
            break;

            case 5: //Joran
              Shadowbox.open({ 
                content: '<p style="color: white; font-size: 16px;">Jordan</p>',
                player:     "html",
                title:      "Middle East and North Africa",
                height:     400,
                width:      640
            });
            break;

            case 11: //Qatar
              Shadowbox.open({ 
                content: '<p style="color: white; font-size: 16px; text-align: center;"><span style="font-weight: bold; font-size: 25px;">Qatar Skills Academy</span><br>Barwa Commercial Avenue<br>Building 39<br>Doha<br>Qatar</p>',
                player:     "html",
                title:      "Middle East and North Africa",
                height:     400,
                width:      640
            });
            break;

            default: 
            return;
          }

赞(0）回复(0）举报 2022-12-16

我来回答

根据shadowbox.js中的JVectormap区域显示不同的html内容

1条答案

相关问题

热门标签

最新问答