US MAP,状态链接到HTML,HTML使用jQuery在页面上的DIV中加载
US MAP, States link to HTML, HTML loads in a DIV on the page using jQuery
免责声明:我链接到的网站目前只有针对阿拉斯加和阿拉巴马州编码的功能,所以只点击那些,其他的还没有工作。我遇到的问题是,当单击阿拉斯加或阿拉巴马州或任何其他州时,jquery 并不总是返回结果。我认为这与浏览器兼容性或jquery版本有关,但是在这一点上,我没有想法,需要您的帮助。
该网站是:
http://electrix.com/reps_find_map_mag.html
我编码结果的唯一两个州是阿拉斯加州和阿拉巴马州,所以请尝试单击它们,其他州尚不起作用。
地图是拉斐尔。我正在使用的jquery插件是:
http://newsignature.github.io/us-map/
我的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>
我已经给了你我正在使用的页面和jquery,如果你知道为什么这段代码在所有浏览器中都不起作用的解决方案,或者如果你有更好的代码来实现这一目标,我会非常感激。
根据我所看到的,唯一的问题是您没有为所有状态正确设置 HTML 页面。 因此,当您根据描述名称在末尾运行 .load() 方法时,由于该文件不存在,它无法将任何内容加载到 #clicked 状态,因此它会以静默方式中断。
代码本身很好。 只需让所有其他目标页面正常工作,您就可以开始了。
相关文章:
- how to convert html <div> to pdf
- 选择时使用jQuery克隆HTML DIV
- Custom clipping path over HTML <div>
- 如何为特定的 HTML Div 创建 dijit/Dialog,并使用 Div 的元素作为其内容
- HTML DIV 显示无元素调整大小
- 选定的 HTML DIV 元素可拖动 JQueryUi 可拖动
- html <div> doesn't seem to get recognised
- javascript 将数组的元素映射到 HTML DIV 模板
- HTML Div转换为带有背景图像Html2canvas的图像
- Displaying php results in html <div>?
- 如何获取HTML DIV值
- 无法使用 Javascript 将 jQuery 类应用于 HTML DIV
- 使用Angular和ng repeat将Attributes添加到HTML DIV中
- 发送HTML Div作为电子邮件文件附件
- 如何获取JSON数据从HTML DIV在同一页面Highcharts
- 动态复制HTML DIV与Javascript
- 在HTML Div中每行的开头插入一个字符
- 如何将JS变量的值路由到HTML Div
- HTML Div类不能使图像变为新图像
- 将HTML DIV转换为可重复使用的全局函数??也许Javascript