1

無限スクロールのjQueryプラグインを使用して、Twitterのようなページング機能を実装しています。これで、[詳細]リンクをクリックすると、リクエストがサーバーに送信され、HTMLとしてレスポンスが返されます。最初にjQueryテンプレートを使用してみましたが、JSONを使用してそれを行うためのオンラインで何も見つからなかったため、後ですべてを変更しました。

さて、今私はコードだけがページ上の既存のコンテンツに応答を追加しないという問題があります。リクエストを送信するだけで、ドキュメントの既存のモックアップに追加することはありません。

プラグインのデモ：http://www.infinite-scroll.com/trigger.html

このようなコードが欲しい

<div id="result">
    <ul>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
        <li>
        </li>
    </ul>
</div>

ユーザーがmoreリンクをクリックすると、応答からより多くの'liが取得され、結果'ul'内の'li'に追加される必要があります。

 $('#result ul').infinitescroll({
        navSelector: "a#next:last",
        // selector for the paged navigation (it will be hidden)
        nextSelector: "a#next:last",
        // selector for the NEXT link (to page 2)
        itemSelector: "#result ul"
        // selector for all items you'll retrieve
    });

    // kill scroll binding
    $(window).unbind('.infscr');

    // hook up the manual click guy.
    $('a#next').click(function () {
        $(document).trigger('retrieve.infscr');
        return false;
    });

    // remove the paginator when we're done.
    $(document).ajaxError(function (e, xhr, opt) {
    });
4

1 に答える 1

1

これを実現するためにプラグインも必要ありません。これは、jQueryのいくつかの単純な行で行われます。

例： http： //jsfiddle.net/6fnTT/9/

$("a").live("click", function(){
    var data = "<li style='display:none'>Text3</li>";

    $("ul").append(data);
    $("li:hidden").fadeIn('slow');
});

データは何でもかまいません（フェード効果があることが見えないことと、li：hiddenを編集する必要があることを確認してください）。たとえば、ajaxリクエストの結果である可能性があります。結果のタイプ（htmlやjsonなど）に応じて、htmlに適合するように準備する必要があります。

ajaxの応答に問題がある場合は、コードを投稿してください。

于 2011-04-12T14:25:03.467 に答える