0

サイトの無限スクロール システムを一緒にハックしようとしていますが、問題が発生しています。

基本的に、たくさんの<li>要素を持つ div があります。

この関数は、div をスライスし<li>、最初の 20 の後のすべての要素を非表示にします。ページの一番下までスクロールすると、すべてが表示され、すぐに 40 にスライスされ、残りが再び非表示になります。

$("#CategoryContent li").slice(20).hide();    

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $("#CategoryContent li").show();
           $("#CategoryContent li").slice(40).hide();
       }
    });

すべてのコンテンツがロードされるまで、これが無限に発生することを望んでいます。

異なるスライス番号で同じコードを追加しても、明らかに機能しません。では、どうすればいいのでしょうか？

最初のスライスの値を変数に格納し、関数が実行されたら、その変数を 20 増やしますか?

これを処理するプラグインを探しましたが、それらはすべて、現在オプションではないページネーションに依存しています。

4

3 に答える 3

0

私はこれをやってしまった

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});
于 2012-05-24T02:06:44.257 に答える
0

最初に行うことは、セレクターをキャッシュすることです。あなたはいつもそれを扱っているように見えるので、理にかなっています。

var category_content_lis = $('#CategoryContent li');

次に、私はおそらくこれを気にしません.slice。おそらく、セレクターのようなものを使用して、何らかの方法で:lt()セレクターを微調整します。

アイデアは、すべてを非表示にしてから、段階的に表示することです。

category_content_lis
    .hide()
    .filter(':lt(20)')
    .show()
    ;

これらを 20 ずつ表示する場合は、次の 20 の表示をトリガーするために次のようにすることができます。

category_content_lis
    .filter(':hidden:lt(20)')
    .show()
    ;

...必要に応じて、便利に関数にカプセル化できます。リストの長さに関係なく、それは機能します。

すべてを非表示にしてから選択を表示しているわけではないことに注意してください。そのようなものはちらつきを引き起こしますが、これは単に刺激的であり、てんかんを引き起こす場合と引き起こさない場合があります.

于 2012-05-02T07:16:47.533 に答える
0

コストはかかりますが、表示可能な要素の数を取得して、それに 20 を追加することができます。を呼び出す前$("#CategoryContent li").show()に、次のことを行うことができます。

var visibleItems = $("#CategoryContent li").filter(function( i, el ) {
    return $(el).css("display") !== "none";
});

displayこれにより、CSSプロパティが に設定されていない $("#CategoryContent li") コレクション内のすべてのアイテムが返されますnone。

次に、スライス呼び出しを次のように更新できます。

$("#CategoryContent li").slice(visibleItems.length + 20).hide();

そうは言っても、より良い方法は、カウントを手動で追跡し、全体に関数ラッパーを配置することです。

(function ( ) {
    var visibleCount = 20;

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
           visibleCount += 20;
           $("#CategoryContent li").show();
           $("#CategoryContent li").slice(visibleCount).hide();
       }
    });
}());
于 2012-05-02T06:20:31.747 に答える