javascript - jquery 代码中的小逻辑问题 : "load" more pages with jquery

Question

我在新闻索引页面中有许多 article div，其中每个 div 都包含一个新闻预告片。

我想显示前 10 个，然后在向下滚动并到达底部时，我将显示另外 10 个等等。这是我的 js。

$(function () {
  shown = 0;
  $('.artikel').hide();
  $('.artikel').each(function () {
    if (shown <= 10) {
        shown += 1;
        $(this).show();
    }
  });
  $(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {

        setTimeout(function () {
            // problem here. 
            $('.artikel').each(function () {
                if (shown <= 20) {
                    shown += 1;
                    $(this).show();
                }
            });


        }, 1500);
    }
  });
});

我的逻辑问题是，一旦我滚动到底部，setTimeOut 中的函数就会从头开始重新计算所有article。

我希望它显示从上次显示的文章开始的下 10 条新闻。有人可以为此提供一点帮助吗？

Answer 1

您可以找到第一篇隐藏的文章，然后显示以下 10 篇文章，因此您不必计算到目前为止已显示的文章数量:

var shownCount = 0;

$('.artikel:not(:visible)').each(function () {
    if (shownCount <= 10) {
        shownCount += 1;
        $(this).show();
    }