Question

我试图找出一种方法来使用加载更多按钮来加载40个div（id =＆＃34; dreamz＆＃34;）

<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。

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

谢谢！

Answer 1

首先你应该使用class =＆＃34; dreamz＆＃34;而不是id（id是唯一的）。

然后使用css隐藏类dreamz，使用＆＃34; display：none;＆＃34;

然后你的javascript：

＆＃13;

$(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");
      }
  });
});

＆＃13;

.dreamz { display:none; }

＆＃13;

<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>

＆＃13;

配置加载更多按钮

1 个答案: