2

我在电子商务网站中实现了 Infinitescroll 插件，以两种不同类型的视图向下滚动所有产品页面：列表和网格（.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');
}
}

我一直在研究很多，甚至通过插件核心代码查看，我似乎无法弄清楚这一点。

我要提前感谢您的帮助。

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 核心代码并插入了一个函数（ display() ），它在 ajax .load 之后更改屏幕上所有产品的显示/css () 函数结束：

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

就是这样！插件现在工作得很好！

如果你们中的任何人遇到类似的问题，我希望这会有所帮助。干杯!

于 2012-12-20T13:42:32.197 回答