我试图找出一种方法,使用“加载更多”按钮加载40个div(id =“ dreamz”)

<div id="dreamz">
<button class="accordion" id="borderz">The lunar light<a>2018.12.09</a></button>
<div class="panelz">
  <table>
  <th width="50%">
  <img src="assets/images/dream.jpg" width="100%"/>
 <th class="descrip" style="vertical-align: top;" width="50%">
  <p>This is the description</p>
  </th>
</table>
</div>
</div>


我使用的JavaScript是:

 $(function(){
    $("div").slice(0, 5).show();
    $("#load").click(function(e){
        e.preventDefault();
        $("div:hidden").slice(0, 5).show();
        if($("div:hidden").length == 0){
            alert("No more dreams");
        }
    });
});


这个锚标签是我用作按钮的

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


我已经尝试过infinite scroll,但是没有用。我使用CSS隐藏dreamz ID。

如果有人可以帮助我,将不胜感激。

谢谢!

最佳答案

首先,您应该使用class =“ dreamz”而不是id(id是唯一的)。

然后使用css通过“ display:none;”隐藏类dreamz。

然后你的JavaScript:



$(function(){
  $(".dreamz").slice(0, 5).show();
  $("#load").click(function(e){
      e.preventDefault();
      $(".dreamz:hidden").slice(0, 5).show();
      if($(".dreamz:hidden").length == 0){
          alert("No more dreams");
      }
  });
});

.dreamz { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>
<div class="dreamz"><p>This is the description</p></div>

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

关于javascript - 配置更多加载按钮,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50043549/

10-12 12:20
查看更多