使用 jQuery 静态加载更多内容插件 - 显示更多项目

版本:

浏览量:990

最后更新：2021-09-10

应用标签：MAC 软件 git Jquery插件

推荐指数:

查看演示点击下载

详细信息

一个简单的 jQuery 脚本，可用于隐藏部分内容（例如长列表）并在用户单击“加载更多”按钮时显示它。

如何使用它：

1. 假设你有一个很长的内容列表如下：

<div class="items">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>

2. 创建一个加载更多按钮来显示接下来的 N 项。

<div class="buttonToogle" style="display: none;">
  <a href="javascript:;" class="showMore">+ View More</a>
</div>

3. 在文档末尾加载最新的 jQuery JavaScript 库。

<script src="/path/to/cdn/jquery.min.js"></script>

4. 主JavaScript (jQueryScript) 启用Load More 按钮。

$(function() {
 
  // items to show
  var increment = 3;
 
  var startFilter = 0;
  var endFilter = increment;
 
  // item selector
  var $this = $('.items');
 
  var elementLength = $this.find('div').length;
  $('.listLength').text(elementLength);
 
  // show/hide the Load More button
  if (elementLength > 2) {
    $('.buttonToogle').show();
  }
 
  $('.items .item').slice(startFilter, endFilter).addClass('shown');
  $('.shownLength').text(endFilter);
  $('.items .item').not('.shown').hide();
  $('.buttonToogle .showMore').on('click', function() {
    if (elementLength > endFilter) {
      startFilter += increment;
      endFilter += increment;
      $('.items .item').slice(startFilter, endFilter).not('.shown').addClass('shown').toggle(500);
      $('.shownLength').text((endFilter > elementLength) ? elementLength : endFilter);
      if (elementLength <= endFilter) {
          $(this).remove();
      }
    }
  });
 
});

联系我们