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

Question

我在电子商务网站中实现了 Infinitescroll 插件，以两种不同类型的 View 向下滚动所有产品页面:列表和网格 (.classes)。

一切都按预期工作，除了加载一堆产品(假设是以下页面)并更改 View 类型后遇到的一个小问题。此时，项目会继续加载，但包含图像和文本的“正在加载 div”会以空值淡入。

一个例子:我们从列表类型开始 -> 向下滚动 -> 加载下一页 -> 向上滚动 -> 更改为网格类型 -> 向下滚动 -> 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');
}
}

我做了很多研究，甚至查看了插件核心代码，但我似乎无法弄清楚这一点。

我想提前感谢您的帮助。

Answer 1

我大概明白了。

问题如下:

产品容器 div 不断改变类，因此它有点迷失了插件的过程。为了解决这个问题，我创建了一个包含更改 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

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

如果你们遇到类似问题，我希望这对您有所帮助。干杯!