0

JQuery を使用して、複数の静的 HTML ファイルから HTML ページを作成しています。メインの html ファイルには、次のように、header.html と footer.html のプレース ホルダーがあります。

<!DOCTYPE html>
<html>
<head>

<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="place-holder" include-file="bbheader.html"></div>
</html>

ファイル bbheader.html には、実行時に追加の HTML コンテンツをロードするための独自のプレースホルダーが含まれています。

bbheader.html の内容

<div class="nav navbar">
    <p> Hello I am bbheader. Thanks for loading me!</p>
    <div class='place-holder' include-file='bbfooter.html'></div>
</div>

これらのファイルをロードするために、以下のように JQuery スクリプトを使用しています。

$(function () {
    loadRecursive($(this));
});

function loadRecursive(context) {
    //search matching elements that have 'place-holder' class
    $('.place-holder', context).each(function() {
        $.get($(this).attr('include-file'), function(data, textStatus) {
            $(this).replaceWith(data);
            loadRecursive($(this));
        }, 'html');
});
}

JQuery.load を使用する代わりに、get を使用しています。これは、load 呼び出しにより、フェッチされたコンテンツが div コンテキストの子として追加されるためです。私が望んでいたのは、プレースホルダー div を完全に置き換えて、取得したコンテンツに置き換えることでした。したがって、get() と replaceWith() を使用しています。

しかし、この行「$(this).replaceWith(data);」で正しい div コンテキストを取得していないため、関数は置換に失敗しています。$(this) は置き換えたい div であると予想していましたが、ここで「this」はコンテンツを取得するために JQuery によって構築されたオブジェクトを指しているようです。

私は JQuery の初心者で、これを正しく行うことができません。これを行うためのより良い/代替方法はありますか?

ありがとう..

更新: Leonard の提案に従って試してみましたが、これが新しいコードです:

function loadRecursive(context) {
    //search matching elements that have 'place-holder' class
    $('.place-holder', context).each(function() {
        var that = this;
        $.get($(this).attr('include-file'), function(data, textStatus) {
            $(that).replaceWith(data);
            loadRecursive(that);
        }, 'html');
    });
}

ただし、これは 1 レベルでのみ機能します。replace?With() を実行した後、再帰に移行すると、loadRecursive の 2 回目の呼び出しで、変更された「自己」が取得されません。

期待される：

<div class="nav navbar">
<p> Hello I am bbheader. Thanks for loading me!</p>
<div class='place-holder' include-file='bbfooter.html'></div>
</div>

しかし、それはまだ持っています

(<div class="place-holder" include-file="bbheader.html"></div>

何か不足していますか？

編集：

ありがとうレナード！次の変更で動作します。

function loadRecursive(context) {
    //search matching elements that have 'place-holder' class
    $('.place-holder', context).each(function() {
        var that = $(this);
        $.get(that.attr('include-file'), function(data, textStatus) {
            repl = $(data);
            that.replaceWith(repl);
            loadRecursive(repl);
        }, 'html');
    });
}
4

1 に答える 1

1

シンプルです。要素を保存するだけです:

function loadRecursive(context) {
    //search matching elements that have 'place-holder' class
    $('.place-holder', context).each(function() {
        var self = $(this);
        $.get(self.attr('include-file'), function(data, textStatus) {
            self.html(data); // Load the data into the placeholder
            loadRecursive(self); // Fix sub placeholders
            self.replaceWith(self.get(0).childNodes); // Unwrap the content
        }, 'html');
    });
}

異なる/ネストされた関数で同じであるとは思わないでくださいthis:)

于 2013-07-28T12:46:47.970 に答える