[英]Importing jquery into module that will be included in an external resource (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.