[英]Display different html content dependant on JVectormap region in shadowbox.js
我使用 JVectorMap 创建了一张世界地图,我想使用 Shadowbox.js 打开一个框,显示有关每个突出显示的国家/地区的各种信息 - 在本例中,它特别是 MENA 国家/地区。
我需要帮助显示不同的消息,具体取决于单击哪个突出显示的国家/地区 - 目前对所有国家都是相同的消息。
到目前为止,我可以显示图像中突出显示的国家/地区的 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”,我该如何更改内容?
任何帮助表示赞赏
万一对我对数组中的每个项目使用 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.