1

jQueryを使用してサーバーサイドインクルードを作成したいのですが、挿入された要素の「title」属性に基づいてコンテンツを自動的に生成するメソッドを作成したいと思います。

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

そうすれば、1つのスクリプトを使用して複数のコンテンツ要素を生成できます。

コンテンツファイルは、ベースファイルと同じフォルダに保存されます。これが私が使おうとしているスクリプトですが、機能していません：

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

3 に答える 3

5

title="..."の代わりにdata-*属性を使用することをお勧めします。私はここでもっと理にかなっていると思います。また、replaceWithやgetでさえも、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、おそらくAJAX/HTTPコードを使用してnav.htmlをロードする方法がわかりません。ただし、変数に設定したら、element.innerHTMLを使用して任意のHTMLテキストをDOM要素に格納できます。

ただし、サーバーで特定のクラスを設定し、一部の要素のタイトル属性にデータを追加する代わりに（もちろん、インクルードを処理するだけのサーバー側のより良いアプローチを考慮していません）、これらの要素にIDを付けます。次に、HTMLドキュメントの下部に、それらのIDとそれらの処理方法（たとえば、それらにロードされるファイル）を保持するJSON配列を出力します。

次に、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 に答える