在列表中显示元素，每三个元素计数一次

Question

有一个 Bootstrap 分页，显示了所有 10 个列表项。虽然我可以隐藏其余的元素并仅显示三个，但当我点击“下一页”时，所有元素都会显示。我只想显示接下来的三个元素并隐藏前面的三个，然后通过“上一页”和“下一页”按钮显示接下来的三个元素。

以下是 CSS：

<style>
    .hide {
        display: none;
    }
</style>

这是HTML代码：

这是一个段落

<div class="page">
    <nav>
        <ul class="pagination pagination-lg">
            <li class="page-item">
                <span class="page-link prev" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
                </span>
            </li>
            <li class="page-item list"><a class="page-link" href="#">1</a></li>
            <li class="page-item list"><a class="page-link" href="#">2</a></li>
            <li class="page-item list"><a class="page-link" href="#">3</a></li>
            <li class="page-item list"><a class="page-link" href="#">4</a></li>
            <li class="page-item list"><a class="page-link" href="#">5</a></li>
            <li class="page-item list"><a class="page-link" href="#">6</a></li>
            <li class="page-item list"><a class="page-link" href="#">7</a></li>
            <li class="page-item list"><a class="page-link" href="#">8</a></li>
            <li class="page-item list"><a class="page-link" href="#">9</a></li>
            <li class="page-item list"><a class="page-link" href="#">10</a></li>
            <li class="page-item">
                <span class="page-link next" href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                    <span class="sr-only">Next</span>
                </span>
            </li>
        </ul>
    </nav>
</div>

这是 jQuery：

<script>
    $(document).ready(function() {
        $(".list").slice(3).addClass('hide');
        $("li:last-child").removeClass('hide');
        $('.next').click(function() {
            $('ul li').removeClass('hide');
        });
    });
</script>

这是 JS Fiddle 程序： https://jsfiddle.net/5d7kz732/。

- aashi0001

Answer 1

嗯，你的$('.next').click(function() { 几乎什么也没有。

我加了一个var position = 0; 来追踪当前位置，并在每次点击时将其加3。

if(list.length < position + 3) return 检查，以确保我们不会超过所有元素的长度。

 list.slice(0, position).addClass('hide');
 list.slice(position + 3).addClass('hide');

隐藏剩余的内容。

使其适用于“上一个”按钮。

   $('.prev').click(function() {
     if(0 > position - 3) return position = 0
     position-=3;
     $('ul li').removeClass('hide');
     list.slice(0, position).addClass('hide');
     list.slice(position + 3).addClass('hide');
     $("li:last-child").removeClass('hide');
   });

 $(document).ready(function() {
   var list = $(".list")
   list.slice(3).addClass('hide');
   $("li:last-child").removeClass('hide');

   var position = 0;

   $('.next').click(function() {
     if (list.length < position + 3) return
     position += 3;
     $('ul li').removeClass('hide');
     list.slice(0, position).addClass('hide');
     list.slice(position + 3).addClass('hide');
     $("li:last-child").removeClass('hide');
   });

   $('.prev').click(function() {
     if (0 > position - 3) return position = 0
     position -= 3;
     $('ul li').removeClass('hide');
     list.slice(0, position).addClass('hide');
     list.slice(position + 3).addClass('hide');
     $("li:last-child").removeClass('hide');
   });

 });

.hide {
        display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page">
  <nav>
    <ul class="pagination pagination-lg">
      <li class="page-item">
        <span class="page-link prev" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
        </span>
      </li>
      <li class="page-item list"><a class="page-link" href="#">1</a></li>
      <li class="page-item list"><a class="page-link" href="#">2</a></li>
      <li class="page-item list"><a class="page-link" href="#">3</a></li>
      <li class="page-item list"><a class="page-link" href="#">4</a></li>
      <li class="page-item list"><a class="page-link" href="#">5</a></li>
      <li class="page-item list"><a class="page-link" href="#">6</a></li>
      <li class="page-item list"><a class="page-link" href="#">7</a></li>
      <li class="page-item list"><a class="page-link" href="#">8</a></li>
      <li class="page-item list"><a class="page-link" href="#">9</a></li>
      <li class="page-item list"><a class="page-link" href="#">10</a></li>
      <li class="page-item">
        <span class="page-link next" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
        </span>
      </li>
    </ul>
  </nav>
</div>

- arc

---

你的答案是可行的，但你应该解释一下你目前所做的工作。 - Huelfe

我可以使用next来迭代到下一个元素，但无法返回到以前的元素，你能帮忙解决吗？ - aashi0001

@aashi0001 是的，基本上是一样的，只是相反而已。让我给你展示一下。 - arc

@arcs 如果您能实现这个功能，那就太好了，因为计数器不能降到1、2、3元素以下。 - aashi0001