javascript - 显示更多按钮以在 javascript 或 jquery 中用作分页

Question

我在第一个站点遇到的问题似乎很简单也很常见，它经常发布在 Internet 上并被称为“显示更多”文本。但我真正想要的是完全不同的。首先，我有带有嵌套元素的 html 元素，而不是纯文本。其次，我不想一次知道所有其余的隐藏元素，而是以 3 个元素或 4 个元素左右的 block 的形式考虑以下示例

<div class = "outer" >

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个点击“显示更多”------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

------这三个再次点击“显示更多”------

  and so on until all the elements are not finished.

</div>

现在这也很容易做到，但是如果我们必须在多个层面上做到这一点，该怎么办呢？意味着我们已经移动了带有外部 div 的 div，如下所示

<div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>
    <div class = "outer" >

      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"

</div>

Answer 1

这里有一个适用于您的场景的解决方案: http://jsfiddle.net/4C3AM/

var itemsCount = 0,
itemsMax = $('.outer div').length;
$('.outer div').hide();

function showNextItems() {
    var pagination = 3;

    for (var i = itemsCount; i < (itemsCount + pagination); i++) {
        $('.outer div:eq(' + i + ')').show();
    }

    itemsCount += pagination;

    if (itemsCount > itemsMax) {
        $('#showMore').hide();
    }
};

showNextItems();

$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems();
});