在 php 部分加载更多并隐藏以前的数据而不分页？

Question

是否可以在 php 部分使用 jquery 而不是分页来加载更多内容并隐藏以前的内容？

喜欢

$(function() {
  $(".set").first().show();
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $(".set:visible").slideUp();
    $(".set:visible").next().slideDown();
    if ($(".set:visible").length == 1) {
      $(".set:visible").slideUp();
      $(".set").first().slideDown();
    }
    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 1500);
  });
});

但在该示例中，内容位于单独的 div 中。

我在 google 和此处进行了搜索，但找不到答案。

Answer 1

@DLK 我在下面添加代码asd以供您参考问题，请查看它，这在逻辑上可能会有所帮助。

  $(function () {
      $(".nextContent").slice(0, 2).show();
            let $click = 0;
      $("#loadMore").on('click', function (e) {
            $click++;
          $(".nextContent").slice(0, $click*2).hide();
          e.preventDefault();          
          $(".nextContent:hidden").slice($click*2, $click*2+2).slideDown();
          if ($(".nextContent:hidden").length == 0) {
              $("#load").fadeOut('slow');
              $('#loadmore').replaceWith("<p class='p'>No More</p>");
          }
          $('html,body').animate({
              scrollTop: $(this).offset().top
          }, 1500);
      });
  });

.nextContent {
  display:none;
  margin: 5px 0;
  padding: 8px 0;
  background: #eee;
  border: 1px solid #ccc;
  text-align: center;
}
#loadMore {
    padding: 10px;
    width: 100%;
    display: block;
    text-align: center;
    background-color: #33739E;
    color: #fff;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    transition: all 600ms ease-in-out;
    -webkit-transition: all 600ms ease-in-out;
    -moz-transition: all 600ms ease-in-out;
    -o-transition: all 600ms ease-in-out;
    margin-top: 10px;
    margin-bottom: 10px;
}
#loadMore:hover {
    background-color: #eee;
    color: #33739E;
}

<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="nextContent">Content1</div>
<div class="nextContent">Content2</div>
<div class="nextContent">Content3</div>
<div class="nextContent">Content4</div>
<div class="nextContent">Content5</div>
<div class="nextContent">Content6</div>
<div class="nextContent">Content7</div>

<a href="#" id="loadMore">Load More</a>
</html>

谢谢:)

在 php 部分加载更多并隐藏以前的数据而不分页？

Load more and hide previous data without pagination in php part?

php

jquery

pagination