繁体   English   中英

使用jQuery加载功能的位置区域地图导入外部HTML

[英]Locations area map with jQuery load function importing external HTML

我有一张美国HTML图像地图,其中的状态以坐标突出显示。 单击每个状态都会弹出一个包含设施位置的模态窗口。

现在,我在每个州都有一个ID的地方找到它,用户单击热点,然后通过jQuery .load()使用外部HTML加载设施位置,以减轻文档的负担。

这是JS中的一个例子

$('#Alabama').load('locations/Alabama.html');

然后将在主文档中加载Alabama html的容器是

<div class="overlay" id="Alabama"></div> 

如您所见,我必须为每个状态输入这些信息。 显然,这很乏味,可能不是最佳方法。 我想到了DRY,但我并不擅长从头开始编写Javascript。

在不编写每个状态实例的情况下访问状态ID的最佳方法是什么? 我正在考虑一个带有click函数的JSON对象,该函数构造标记并调用模式窗口。 我只是不确定从哪里开始。

如果是模式窗口,则每次单击状态时都可以使用相同的叠加层。 所以基本上就是这样做...

$(".overlay").load("locations/alabama.html");

完整的示例可能看起来像这样……

$("area").click(function(){
   var url = $(this).attr("href");
   $(".overlay").load(url);
});

您可能需要做一些事情来防止浏览器在单击区域上的默认行为。 您可以删除href值并将其放在其他位置...

$("area").each(function(i, area){
   $(area).data("old-href", $(area).attr("href");
   $(area).attr("href","#");
});
//Then you do the same as above, but you get your url from the data method.
$("area").click(function(){
   var url = $(this).data("old-href");
   $(".overlay").load(url);
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM