如何隐藏列表中的元素并添加“显示更多”功能？

Question

我正在使用 javascript 来构建结果列表。 我有一个 for 循环，它遍历一些数据并创建一个 mydata div，并将其添加到结果 div。 让我们假设它看起来像这样：

<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    ...
    <div class="mydata">data 20</div>
</div>

我想要做的是一次只显示 5 个结果，如果用户希望看到更多，他们可以单击显示下一个 5或显示更多按钮（或类似的东西）。 有任何想法吗？

澄清一下，每次用户单击“显示更多”时，我都想“取消隐藏”接下来的 5 个元素，而不是所有剩余的元素。 因此，每次单击都会显示更多元素，直到所有元素都显示出来。

Answer 1

您可以在这里很好地使用gt()和lt()选择器以及:visible 。

以下将显示单击后的下 5 个结果，并在所有项目可见后删除链接。

$('.mydata:gt(4)').hide().last().after(
    $('<a />').attr('href','#').text('Show more').click(function(){
        var a = this;
        $('.mydata:not(:visible):lt(5)').fadeIn(function(){
         if ($('.mydata:not(:visible)').length == 0) $(a).remove();   
        }); return false;
    })
);

工作示例： http://jsfiddle.net/niklasvh/nTv7D/

不管其他人在这里建议什么，我都不会使用 CSS 隐藏元素，而是在 JS 中进行，因为如果用户禁用了 JS，而您使用 CSS 隐藏元素，他将不会让它们可见。 但是，如果他禁用了 JS，它们将永远不会被隐藏，该按钮也不会出现等，所以它有一个完整的 noscript 后备 + 搜索引擎不喜欢隐藏的内容（但如果你不知道它是隐藏的在 DOM 加载时执行此操作）。

Answer 2

我的解决方案在这里： jsFiddle 。

您可以将此链接放在某处：

<a href="#" title="" id="results-show-more">show more</a>

并使用以下代码：

var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
    jQuery('#results-show-more').hide();
};

jQuery('#results-show-more').bind('click', function(event){
    event.preventDefault();
    limit += per_page;
    jQuery('#results > div.mydata:lt('+(limit)+')').show();
    if (jQuery('#results > div.mydata').length <= limit) {
        jQuery(this).hide();
    }
});

其中limit是您当前显示的结果数， per_page是每次单击“显示更多”时显示的结果数。 如果显示所有结果，链接就会消失。 看看它在 jsFiddle 上是如何工作的。

Answer 3

您可以创建一个 CSS class 像：

.hiddenData { display: none }

并将其附加到任何数量超过 5 的 div 上。

之后，制作用于从所需数量的 div 中添加/删除此 class 的处理程序。

jQuery 用于 class 移除：

$(".hiddenData").removeClass("hiddenData")

Answer 4

使用以下内容创建 class：

.hidden_class{
  display: none;
}

将此 class 添加到您不想看到的所有 mydata div 中。 当用户单击按钮时，将其从接下来的 5 个 div 中删除。

每次用户单击“阅读更多”按钮时重复

Answer 5

这应该工作......让我知道它是怎么回事

<script type="text/javascript">
  function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
    <div class="mydata">data 1</div>
    <div class="mydata">data 2</div>
    <div class="mydata">data 3</div>
    <div class="mydata">data 4</div>
    <div class="mydata">data 5</div>

    <div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
    </div>
    <div style="clear:both" onclick="ShowHide('grp11')">More</div>
    <div id="grp11" style="display:none">
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
      <div class="mydata">data 13</div>
      <div class="mydata">data 14</div>
      <div class="mydata">data 15</div>
    </div>
</div>

在您的 forloop 中，您还必须添加这些 div 隐藏容器

<div style="clear:both" onclick="ShowHide('grp6')">More</div>
    <div id="grp6" style="display:none">

你明白了。

Answer 6

在这里你有：

   <style>
      /*This hides all items initially*/
      .mydata{
         display: none;
      }
   </style>

现在脚本

   <script>
      var currentPage = 1; //Global var that stores the current page
      var itemsPerPage = 5;
      //This function shows a specific 'page'
      function showPage(page){
          $("#results .mydata").each(function(i, elem){
              if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
                $(this).show();
              else
                $(this).hide();
          });
          $("#currentPage").text(currentPage);
      }
      $(document).ready(function(){
          showPage(currentPage);
          $("#next").click(function(){
             showPage(++currentPage);
          });
          $("#prev").click(function(){
             showPage(--currentPage);
          });
      });
   </script>

还有一个样品 html：

   <div id="results">
      <div class="mydata">data 1</div>
      <div class="mydata">data 2</div>
      <div class="mydata">data 3</div>
      <div class="mydata">data 4</div>
      <div class="mydata">data 5</div>
      <div class="mydata">data 6</div>
      <div class="mydata">data 7</div>
      <div class="mydata">data 8</div>
      <div class="mydata">data 9</div>
      <div class="mydata">data 10</div>
      <div class="mydata">data 11</div>
      <div class="mydata">data 12</div>
   </div>   
   <a href="javascript:void(0)" id="prev">Previous</a>
   <span id="currentPage"></span>
   <a href="javascript:void(0)" id="next">Next</a>

剩下的唯一一件事是验证 fot 不会转到低于 1 且高于总数的页面。 但这很容易。

编辑：在这里你运行它： http://jsfiddle.net/U8Q4Z/

希望这可以帮助。 干杯。