Question

我想使用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>

Answer 1

我可能会建议您使用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>

Answer 2

尝试将代码包装在$(document).ready()中，如此

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

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

Answer 3

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

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

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

但是，不是让服务器设置一个特定的类并将数据添加到某些元素的title属性中（当然，不考虑服务器端更好的处理include的方法）我会给这些元素一个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>

使用jQuery创建服务器端包含

3 个答案: