Question

我有这个代码使用jquery，就像我在显示4个新内容时一样，它隐藏了之前的4个，当它到达结尾时回到开头。就像一个旋转木马。

目前，当您点击加载更多内容时，它会保留所有内容，当前和之前的内容。

<html>
<head>

<style>

div {
    display:none;
    padding: 10px;
    border-width: 0 1px 1px 0;
    border-style: solid;
    border-color: #fff;
    box-shadow: 0 1px 1px #ccc;
    margin-bottom: 5px;
    background-color: #f1f1f1;
}


</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<div>Content</div>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>

<div>Content 5</div>
<div>Content 6</div>
<div>Content 7</div>
<div>Content 8</div>
<div>Content 9</div>
<div>Content 10</div>



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

<script>
$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});



</script>
</body>
</htmL>

Answer 1

我认为更好的方法是制作套装，然后使用这些套装...... 我做了一些改变，给你一个想法...... 结账，让我知道这是你想要的吗？

$(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 {
  //display:none;
  padding: 10px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #fff;
  box-shadow: 0 1px 1px #ccc;
  margin-bottom: 5px;
  background-color: #f1f1f1;
}

.set {
  display: none;
}

<html>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
  </script>
</head>

<body>

  <div class="set">
    <div>Content 1</div>
    <div>Content 2</div>
    <div>Content 3</div>
    <div>Content 4</div>
  </div>

  <div class="set">
    <div>Content 5</div>
    <div>Content 6</div>
    <div>Content 7</div>
    <div>Content 8</div>
  </div>

  <div class="set">
    <div>Content 9</div>
    <div>Content 10</div>
    <div>Content 11</div>
    <div>Content 12</div>
  </div>



  <a href="#" id="loadMore">Load More</a>

</body>

</htmL>

Answer 2

你需要做的就是在每个div内容部分，你必须在该div容器中有一个触发特殊事件的按钮。

你应该这样做：

  <div id="view1"> <h1>what ever your content is.<h1>
                  <p> then lets put a button below this
           It could be housed in a paragraph, div or table container 
           how ever you want</p>
           <p align="center"> <button id="hide1">Next </button> </p>

   </div>

对于每个按钮视图，您的java看起来都是这样的：

     <script>



      $(document).ready(function(){
        $("#hide1").click(function(){
          $("#view1").hide();
          $("#view3").hide(); */ and list all the div you want to keep hidden
          $("#view4").hide();
       $("#view5").hide();
        $("#view6").hide()    
          $("#view2").show();
         });

            });




            </script>

然后你需要一个脚本部分来定义你的页面，所以它将在页面加载时执行

      <script>
          $(document).ready(function(){

      $("#view2").hide();
         $("#view3").hide();   
        $("#view4").hide();
       $("#view5").hide();
        $("#view6").hide();

      });
       </script>

当然你可以组合这些集合并将页面加载代码和按钮单击函数放在同一个文档就绪函数中，以使代码运行得更快，但我决定将两者分开，以便我可以更好地解释它。 / p>

加载更多隐藏以前的内容

2 个答案: