2

リストとグリッド (.classes) の 2 種類のビューですべての製品ページを下にスクロールするために、e コマース Web サイトに Infinitescroll プラグインを実装しました。

一連の製品をロードした後に発生している小さな問題を除いて、すべてが期待どおりに機能しています。次のページとしましょう。ビューの種類を変更します。その時点でアイテムはロードし続けますが、画像とテキストを含む「ロード div」は null 値でフェードインします。

例: リスト タイプから開始 -> 下にスクロール -> 次のページをロード -> 上にスクロール -> グリッド タイプに変更 -> 下にスクロール -> null が表示されます。

ここにいくつかのコードがあります：

//Calling infiniteScroll
$('.product-grid.box-product, .product-list').infinitescroll({
      navSelector  : "div .links",            
      nextSelector : "div .links a",    
      itemSelector : "div .struct",
              loading: {finishedMsg: "<em>endmsg</em>",
                        img: "url",
                        msgText: "<em>loading...</em>"}          
    },function(elm){
      //item display-mode sorting function
    });

//How are divs sorted up
function display(view) {
if (view == 'list') {
    $('.product-grid').attr('class', 'product-list');
    $('.product-list > div').each(function(index, element) {
        //item display-mode sorting function
    });
    $.cookie('display', 'list'); 
} else {
    $('.product-list').attr('class', 'product-grid box-product');
    $('.product-grid > div').each(function(index, element) {
        //item display-mode sorting function
    });
    $.cookie('display', 'grid');
}
}

私はプラグインのコアコードを調べても、多くのことを調査してきましたが、これを理解できないようです.

どうぞよろしくお願いいたします。

4

1 に答える 1

0

なんとなくわかってきました。

問題は次のとおりでした。

製品コンテナ div は常にクラスを変更していたため、プラグインの手順が混乱していました。これを解決するために、chaning div を含む新しい div を作成しました。

//Before Call
$('.product-grid.box-product, .product-list').infinitescroll({

//After Call
$('#products').infinitescroll({

別のコンテナで作業すると、プラグインが新しい製品を間違った div にロードするため、コールバックでこれを使用しました:

$(elm).each(function(){
    if($.cookie('display') == 'grid'){
         $(this).appendTo('.product-grid');
    } else {
         $(this).appendTo('.product-list');
    }
});

場合によってはこれを行った後、製品が間違った表示/cssで読み込まれるように見えたので、InfiniteScrollコアコードを調べて、画面上のすべての製品の表示/cssを変更する関数( display() )をajax .loadの直後に挿入しました() 関数の終了:

//Plugin core code
o.load(...,function(t){...;display(view);});
//Plugin core code

以上です！プラグインは非常にうまく機能しています！

誰かが同様の問題を抱えている場合、これが役立つことを願っています。乾杯！

于 2012-12-20T13:42:32.197 に答える