html - 在每次点击阅读更多按钮时显示接下来的两个 div

Question

在一个页面中有 10 个帖子，但默认情况下，我必须显示前 2 个帖子，然后显示阅读更多按钮。当我们点击阅读更多按钮时，接下来的 2 个帖子（总共 4 个帖子）将显示然后阅读更多按钮。直到最后一个帖子都是一样的。

例如：

<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>

我们有 10 个 div，默认情况下会显示前两个 div，然后显示一个阅读更多按钮。单击阅读更多按钮后，将显示接下来的两个 div。

请任何人都可以解释我们如何通过 HTML + jQuery 做到这一点？

谢谢，

标签： htmljquery

Answer 1

这是我根据要求使用 jQuery 对此的看法：

$(".feed-post:eq( 0 )").show();
$(".feed-post:eq( 1 )").show();

function next2() {
  var notVisible = -1;
  $('.feed-post').each(function() {
    if ($(this).css('display') !== 'none') {
      notVisible = notVisible + 1;
    }
  });
  $(".feed-post:eq( " + (notVisible + 1) + " )").show();
  $(".feed-post:eq( " + (notVisible + 2) + " )").show();
}

.feed-post {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<div class="feed-post">Test message</div>
<button onclick='next2()'>read more</button>