1

我想使用jQuery创建服务器端包含，但我想创建一个方法来根据插入元素的“title”属性自动生成内容，例如：

<div class="js-include" title="nav.html"></div>
<div class="js-include" title="table.html"></div>

这样，一个脚本就可以用来生成多个内容元素。

内容文件存储在与基本文件相同的文件夹中。这是我正在尝试使用的脚本，但它不起作用：

<script>
$(".js-include").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});
</script>
4

3 回答 3

5

我可能会建议您使用 data-* 属性而不是 title="..."。我认为在这里我会更有意义。此外，您不需要替换甚至获取，jquery 有一个 ajax 重载来帮助您。

<div class="js-include" data-page="nav.html"></div>
<script>
$(function () {
    $(".js-include").each(function () {
        $(this).load($(this).data('page'));
    });
});
</script>
于 2013-01-08T05:04:04.867 回答
3

尝试$(document).ready()像这样包装代码

<script type="text/javascript>
$(document).ready(function(){
    $(".js-include").each(function(){
        $(this).load($(this).attr("title"));
    });
});
</script>

如果这不起作用，请确保检查浏览器的网络/错误控制台是否存在 HTTP 错误。

于 2013-01-08T05:02:42.533 回答
1

嗯，我想我明白你想做什么。您想使用 jQuery 加载 nav.html 并将其内容放入该 div 吗？

你为什么不从服务器端做呢？如果这些 div 是在服务器端创建的，则服务器在页面加载期间知道它们在那里需要并且可以只包含它们，而不是让 JS 处理。

我不知道如何使用 jQuery 加载 nav.html，也许是一些 AJAX/HTTP 代码。但是一旦你把它放在一个变量上，你就可以使用 element.innerHTML 将任何 HTML 文本存储到一个 DOM 元素中。

但是，与其让服务器设置一个特定的类并将数据添加到某些元素的标题属性中，（当然，不考虑服务器端仅处理包含的更好方法）我会给这些元素一个 id。然后，在 HTML 文档的底部，我将打印一个 JSON 数组，其中包含这些 id 以及如何处理它们（例如要加载到其中的文件）。

然后在一个 JS 文件中，我获取该数组，循环遍历它并根据需要处理它的数据。

编辑：我以前从未做过这样的事情，你必须运行它来测试任何 sxyntax 错误。

<?php
$fileslinks = array(
    array(
        'id'        => 'id1',
        'filename'  => 'file1.html'
    ),
    array(
        'id'        => 'id2',
        'filename'  => 'file2.html'
    ),
    array(
        'id'        => 'id3',
        'filename'  => 'file3.html'
    )
);
?>

<div id='id1'></div>
<div id='id2'></div>
<div id='id3'></div>

<script>
    var fileslinks = <?php echo json_encude($fileslinks); ?>;

    fileslinks.forEach(printFiles);

function printFiles(element, index, array){
    var fileContent = // load from element.filename
    document.getElementById(element.id).innerHTML = fileContent;
}


if(!Array.prototype.forEach){
    Array.prototype.forEach = function(fun){
        var len = this.length;
        if(typeof fun != "function")
            throw new TypeError();

        var thisp = arguments[1];
        for(var i = 0; i < len; i++){
            if(i in this)
                fun.call(thisp, this[i], i, this);
        }
    };
}

</script>
于 2013-01-08T05:02:40.863 回答