Javascript 美国地图,状态链接到HTML,HTML使用jQuery加载到页面上的DIV中
免责声明:我链接到的网站目前只有阿拉斯加和阿拉巴马州的功能代码,所以只需单击这些,其他的还不能工作。我遇到的问题是,当单击阿拉斯加、阿拉巴马州或任何其他州时,jquery并不总是返回结果。我认为这与浏览器兼容性或jquery版本有关,但现在我已经没有主意了,需要您的帮助 网址为: 我唯一有结果编码的两个州是阿拉斯加和阿拉巴马州,所以试着点击这两个州,其他州还不行 这张地图是拉斐尔的。我使用的jquery插件是: 我的jquery加载地图,然后在右侧DIV中加载另一个html页面,如下所示:Javascript 美国地图,状态链接到HTML,HTML使用jQuery加载到页面上的DIV中,javascript,jquery,html,google-maps,cross-browser,Javascript,Jquery,Html,Google Maps,Cross Browser,免责声明:我链接到的网站目前只有阿拉斯加和阿拉巴马州的功能代码,所以只需单击这些,其他的还不能工作。我遇到的问题是,当单击阿拉斯加、阿拉巴马州或任何其他州时,jquery并不总是返回结果。我认为这与浏览器兼容性或jquery版本有关,但现在我已经没有主意了,需要您的帮助 网址为: 我唯一有结果编码的两个州是阿拉斯加和阿拉巴马州,所以试着点击这两个州,其他州还不行 这张地图是拉斐尔的。我使用的jquery插件是: 我的jquery加载地图,然后在右侧DIV中加载另一个html页面,如下所示:
<script>
$(document).ready(function () {
$('#map').usmap({
click: function(event, data) {
var description = "No state info loaded for this state.";
switch (data.name)
{
case 'AL':
description = 'alabama';
break;
case 'AK':
description = 'alaska';
break;
case 'AZ':
description = 'arizona';
break;
case 'AR':
description = 'arkansas';
break;
case 'CA':
description = 'california';
break;
case 'CO':
description = 'colorado';
break;
case 'CT':
description = 'connecticut';
break;
case 'DE':
description = 'delaware';
break;
case 'FL':
description = 'florida';
break;
case 'GA':
description = 'georgia';
break;
case 'HI':
description = 'hawaii';
break;
case 'ID':
description = 'idaho';
break;
case 'IL':
description = 'illinois';
break;
case 'IN':
description = 'indiana';
break;
case 'IA':
description = 'iowa';
break;
case 'KS':
description = 'kansas';
break;
case 'KY':
description = 'kentucky';
break;
case 'LA':
description = 'louisiana';
break;
case 'ME':
description = 'maine';
break;
case 'MD':
description = 'maryland';
break;
case 'MA':
description = 'massachusetts';
break;
case 'MI':
description = 'michigan';
break;
case 'MN':
description = 'minnesota';
break;
case 'MS':
description = 'mississippi';
break;
case 'MO':
description = 'missouri';
break;
case 'MT':
description = 'montana';
break;
case 'NE':
description = 'nebraska';
break;
case 'NV':
description = 'nevada';
break;
case 'NH':
description = 'newhampshire';
break;
case 'NJ':
description = 'newjersey';
break;
case 'NM':
description = 'newmexico';
break;
case 'NY':
description = 'newyork';
break;
case 'NC':
description = 'northcarolina';
break;
case 'ND':
description = 'northdakota';
break;
case 'OH':
description = 'ohio';
break;
case 'OK':
description = 'oklahoma';
break;
case 'OR':
description = 'oregon';
break;
case 'PA':
description = 'pennsylvania';
break;
case 'RI':
description = 'rhodeisland';
break;
case 'SC':
description = 'southcarolina';
break;
case 'SD':
description = 'southdakota';
break;
case 'TN':
description = 'tennessee';
break;
case 'TX':
description = 'texas';
break;
case 'UT':
description = 'utah';
break;
case 'VT':
description = 'vermont';
break;
case 'VA':
description = 'virginia';
break;
case 'WA':
description = 'washington';
break;
case 'WV':
description = 'westvirginia';
break;
case 'WI':
description = 'wisconsin';
break;
case 'WY':
description = 'wyoming';
break;
case 'DC':
description = 'washingtondc';
break;
// etc
}
$('#clicked-state').load('http://electrix.com/usrep/' + description + '.html');
$("body").css("background-color", "#333");
}
});
});
</script>
$(文档).ready(函数(){
$('#map').usmap({
单击:功能(事件、数据){
var description=“没有为此状态加载状态信息。”;
开关(data.name)
{
案例“AL”:
描述=‘阿拉巴马’;
打破
案件‘AK’:
描述=‘阿拉斯加’;
打破
案例“AZ”:
描述=‘亚利桑那’;
打破
案例“AR”:
描述=‘阿肯色州’;
打破
案例“CA”:
描述=‘加利福尼亚’;
打破
案例“CO”:
描述=‘科罗拉多’;
打破
案例“CT”:
描述='康涅狄格州';
打破
案例“DE”:
描述=‘特拉华’;
打破
案例“FL”:
描述=‘佛罗里达’;
打破
案例“GA”:
描述=‘格鲁吉亚’;
打破
案例“嗨”:
description=‘夏威夷’;
打破
案件编号:
description=‘爱达荷’;
打破
案例“IL”:
描述=‘伊利诺伊’;
打破
案例“IN”:
description='indiana';
打破
案例“IA”:
描述=‘爱荷华州’;
打破
案例“KS”:
描述=‘堪萨斯’;
打破
案例“KY”:
description=‘肯塔基’;
打破
案例“LA”:
描述=‘路易斯安那’;
打破
“我”一案:
描述=‘缅因州’;
打破
案例“MD”:
description=‘马里兰’;
打破
案例“MA”:
description='马萨诸塞州';
打破
案例“MI”:
描述=‘密歇根’;
打破
案例'MN':
描述=‘明尼苏达’;
打破
案例“MS”:
描述=‘密西西比’;
打破
案例“MO”:
描述=‘密苏里’;
打破
案例“MT”:
描述=‘蒙大拿’;
打破
案例“NE”:
描述=‘内布拉斯加州’;
打破
案例“NV”:
描述=‘内华达’;
打破
案例“NH”:
描述=‘新罕布什尔’;
打破
案例“NJ”:
描述=‘新泽西’;
打破
案例“NM”:
description=‘新墨西哥’;
打破
案例“NY”:
描述=‘纽约’;
打破
案例“NC”:
description=‘北卡罗来纳’;
打破
案例“ND”:
描述=‘北达科他州’;
打破
案例“哦”:
描述=‘俄亥俄’;
打破
案例“OK”:
描述=‘俄克拉荷马’;
打破
案例“或”:
描述='俄勒冈州';
打破
案例“PA”:
描述=‘宾夕法尼亚’;
打破
案例‘RI’:
描述=‘罗德岛’;
打破
案例“SC”:
描述=‘南卡罗来纳’;
打破
案例“SD”:
描述=‘南达科他州’;
打破
案例“TN”:
description=‘田纳西’;
打破
案例“TX”:
描述=‘德克萨斯’;
打破
案例“UT”:
描述=‘犹他’;
打破
案例“VT”:
描述=‘佛蒙特’;
打破
案例“VA”:
description=‘virginia’;
打破
案例“WA”:
description=‘华盛顿’;
打破
案例“WV”:
description=‘西弗吉尼亚’;
打破
案例“WI”:
描述=‘威斯康星州’;
打破
案例“WY”:
description=‘怀俄明州’;
打破
案例“DC”:
description='washingtondc';
打破
//等
}
$('#单击状态')。加载('http://electrix.com/usrep/“+description+”.html');
$(“body”).css(“背景色”、“#333”);
}
});
});
我已经给了你我正在使用的页面和jquery,请告诉我你是否知道为什么这段代码不能在所有浏览器中工作的解决方案,或者如果你有更好的代码来实现这一点,我将非常感谢 根据我所看到的,唯一的问题是没有为所有状态正确设置HTML页面。因此,当您在末尾基于描述名称运行.load()方法时,由于该文件不存在,它无法将任何内容加载到#clicked状态,因此它会无声地中断
代码本身很好。只需让所有其他目标页面正常工作,您就可以开始了。完成了任何基本调试,比如检查不工作浏览器的控制台是否存在错误?我听说这些浏览器不工作、对我有效,并且没有任何错误。如果您想向自己证明这一点,只需在上添加一条警告语句即可