Question

我在电子商务网站中实施了Infinitescroll插件，以两种不同类型的视图向下滚动所有产品页面：list＆amp; grid（.classes）。

一切都按预期工作，除了加载一堆产品后我遇到的一个小问题，让我们说下面的页面，并更改视图类型。在这一点上，项目继续加载，但是包含图像的“loading div”和带有null valors的文本fadesIn。

一个例子：我们从列表类型开始 - ＆gt;向下滚动 - ＆gt;加载下一页 - ＆gt;向上滚动 - ＆gt;更改为网格类型 - ＆gt;向下滚动 - ＆gt; null 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 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（）），该函数更改了屏幕上所有产品的显示/ css。 ajax .load（）函数结束：

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

就是这样！插件的工作现在非常好！

我希望如果有人遇到类似的问题，这会有所帮助。干杯！

使用Infinitescroll jQuery插件操作时丢失变量

1 个答案: