使用Infinitescroll jQuery插件運行時丟失變量

Question

我在電子商務網站中實現了Infinitescroll插件，以向下滾動兩種不同類型視圖中的所有產品頁面：列表& grid（.classes）。

一切正如預期的那樣工作，除了我在加載一堆產品後出現的一個小問題，讓我們說下一頁，並更改視圖類型。在這一點上項目繼續加載，但包含圖像和文本的「加載div」淡入淡出。

舉例：我們從列表類型 - >向下滾動 - >加載下一頁 - >向上滾動 - >改變爲網格類型 - >向下滾動 - >空白apears開始。

下面是一些代碼：

//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'); 
} 
} 

我一直在研究了很多，甚至找槽插件核心代碼，我只是似乎無法想出解決辦法。

我想事先感謝您的幫助。

Answer 1

我有點想通了。

問題是以下幾點：

產品div容器中chaning類不斷，因此那種暈頭轉向的插件的過程。爲了解決這個問題，我創建了一個包含了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核心代碼，並插入了一個函數（display（）），在ajax後面的屏幕上更改所有產品的顯示/ .load（）函數結束：

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

就是這樣！現在插件工作非常好！

我希望這可以幫助您解決任何問題。乾杯!