javascript - 隐藏所有文章并在我们单击下一步并预览时按 5 乘 5 显示它们

Question

我正在开发一个 jsfiddle，我的目标是当我们点击“上一篇/下一篇”按钮，我们可以看到 5 篇下一篇或 5 篇上一篇文章，但是所有其他的都必须隐藏。

这时候我可以点击“上一个/下一个”按钮，然后我们就可以查看 5 篇下一篇或 5 篇上一篇文章，但所有其他文章都是已经可见保持可见。

这是我的例子，可能有人有更简单的想法:

$(document).ready(function () {
    size_article = $("#myList article").size();
    x=5;
    $('#myList article:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_article) ? x+5 : size_article;
        $('#myList article:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList article').not(':lt('+x+')').hide();
    });
});

#myList article{
display: none;
}

#loadMore {
color: green;
cursor: pointer;
}

#showLess {
color: red;
cursor: pointer;
}

#loadMore:hover, #showLess:hover {
color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
    <article>One</article>
    <article>Two</article>
    <article>Three</article>
    <article>Four</article>
    <article>Five</article>
    <article>Six</article>
    <article>Seven</article>
    <article>Eight</article>
    <article>Nine</article>
    <article>Ten</article>
    <article>Eleven</article>
    <article>Twelve</article>
    <article>Thirteen</article>
    <article>Fourteen</article>
    <article>Fifteen</article>
    <article>Sixteen</article>
    <article>Seventeen</article>
    <article>Eighteen</article>
    <article>Nineteen</article>
    <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

Answer 1

您可以使用 slice()作为 $(this).slice(start_index, end_index) 获取下一个或上一个 5 个元素。

$(document).ready(function() {
  size = $('#myList article').length;
  x = 5;
  $('#myList article:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    if (x + 5 > size) return;
    $('#myList article').hide();
    $('#myList article').slice(x, x + 5).show();
    x += 5;
  });
  $('#showLess').click(function() {
    if (x - 5 <= 0) return;
    $('#myList article').hide();
    x -= 5;
    $('#myList article').slice(x - 5, x).show();
  });
});

#myList article {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>