Question

我想保持代码简洁。所以我输入了大量的HTML文件。

我有这个头脑：

<script> 
var loadHtml(file) {
    $("#LoadHTML").load("html/file.html"); 
});
</script>

这在体内：

<div id="LoadHTML"></div>

问题是我必须为我拥有的每个<div>复制脚本有没有办法可以在脚本中创建一个占位符并执行我已经可视化的内容？

<!-- Head -->
<script> 
$(function(){
$("#LoadHTML").load("html/{data}.html"); 
});
</script>

<!-- Body -->
<div id="LoadHTML" data="file"></div>

我该怎么做，所以我只需要使用一次脚本？

Answer 1

您可以对要由公共类加载的元素进行分组，并使用data属性设置用于将AJAX请求定位到的URL，如下所示：

$(".load").each(function() {
  $(this).load($(this).data('target')); 
});

<div class="load" data-target="html/file.html"></div>
<div class="load" data-target="html/foo.html"></div>
<div class="load" data-target="html/bar.html"></div>

话虽如此，我强烈建议您尽可能使用服务器端包括而不是当前的方法。使用客户端请求会对服务器产生更多（可能是不必要的）请求，从而减慢它的速度。

Answer 2

是的，你可以！

$("#LoadHTML").load("html/" + data + ".html");

其中data是您模板的关键字。

Answer 3

id必须是唯一的。您可能必须生成id名称，因此它将是＃LoadHTML1，＃LoadHTML2，＃LoadHTML3等。

或者使用类，因此它是“.LoadHTML”

使用JavaScript加载外部HTML

3 个答案: