0

我正在尝试为一个站点构建一个无限滚动系统，但遇到了问题。

基本上有一个包含很多<li>元素的 div。

此函数对 div 进行切片并隐藏<li>前 20 个元素之后的每个元素。一旦滚动到页面底部，它会显示所有元素并立即切片到 40 个元素，然后再次隐藏其余元素。

$("#CategoryContent li").slice(20).hide();    

$(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
            $("#CategoryContent li").show();
           $("#CategoryContent li").slice(40).hide();
       }
    });

我非常希望这种情况无限发生，直到所有内容都加载完毕。

添加具有不同切片编号的相同代码显然不起作用。那么我该怎么做呢？

将第一个切片的值存储在一个变量中，一旦执行该函数，将该变量增加 20？

我已经搜索了插件来为我解决这个问题，但它们都依赖于分页，目前这不是一个选项。

4

3 回答 3

0

它很昂贵，但您可以获得可见元素的数量，然后添加 20。在调用之前$("#CategoryContent li").show()，您可以这样做：

var visibleItems = $("#CategoryContent li").filter(function( i, el ) {
    return $(el).css("display") !== "none";
});

这将返回 $("#CategoryContent li") 集合中所有未将其 CSSdisplay属性设置为none.

然后您可以将切片调用更新为：

$("#CategoryContent li").slice(visibleItems.length + 20).hide();

话虽如此，更好的方法是手动跟踪计数并在整个事物周围放置一个函数包装器。

(function ( ) {
    var visibleCount = 20;

    $(window).scroll(function() {
       if($(window).scrollTop() + $(window).height() == $(document).height()) {
           visibleCount += 20;
           $("#CategoryContent li").show();
           $("#CategoryContent li").slice(visibleCount).hide();
       }
    });
}());
于 2012-05-02T06:20:31.747 回答
0

我要做的第一件事是缓存你的选择器。有道理，因为看起来你一直在使用它。

var category_content_lis = $('#CategoryContent li');

接下来，我可能不会.slice为此烦恼。我很可能只是使用选择器之类的东西:lt()来以某种方式微调我的选择器。

这个想法是隐藏所有内容，然后以增量方式显示它们。

category_content_lis
    .hide()
    .filter(':lt(20)')
    .show()
    ;

现在，如果您只是以 20 为增量显示它们，那么您可以执行以下操作来触发显示下一个 20：

category_content_lis
    .filter(':hidden:lt(20)')
    .show()
    ;

...如果您愿意，可以方便地将其封装在一个函数中。无论您的清单有多长，这都会起作用。

请注意，我们并没有隐藏所有内容然后显示选择。类似的东西会导致闪烁，这只是刺激性的，可能会也可能不会导致癫痫。

于 2012-05-02T07:16:47.533 回答
0

我最终这样做了

var mincount = 20;
var maxcount = 40;


$(window).scroll(function() 
                    {
                    if($(window).scrollTop() + $(window).height() >= $(document).height() - 400) {
                            $("#CategoryContent li").slice(mincount,maxcount).fadeIn(800);

mincount = mincount+20;
maxcount = maxcount+20

}
});
于 2012-05-24T02:06:44.257 回答