Question

我有一张美国HTML图片地图，其中的状态用坐标突出显示。点击时每个州都会显示一个带有设施位置的模态窗口。

现在我知道每个州都有一个ID，用户点击热点，然后通过jQuery .load（）使用外部HTML加载设施位置，以减轻文档负载。

这是JS中的一个例子

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

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

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

正如你所看到的，我必须为每个州输入这些内容。显然这很乏味，可能不是最好的方法。 DRY浮现在脑海中，但我不擅长从头开始编写Javascript。

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

Answer 1

如果它是一个模态窗口，那么每次单击一个状态时你可能只使用相同的叠加层。所以基本上就这样做......

$(".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);
});

使用jQuery加载函数导入外部HTML的位置区域映射

1 个答案: