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是每次点击“显示更多”时显示的结果数。如果显示所有结果，则链接将消失。看看它是如何works on jsFiddle。

Answer 3

您可以创建一个CSS类，如：

.hiddenData { display: none }

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

之后，使用处理程序从所需数量的div中添加/删除此类。

用于删除类的jQuery：

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

Answer 4

创建一个类似于：

的类

.hidden_class{
  display: none;
}

将此类添加到您不想看到的所有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>

唯一剩下的就是验证不会出现低于1且高于总数的页面。但这很容易。

编辑：您可以在此运行：http://jsfiddle.net/U8Q4Z/

希望这会有所帮助。欢呼声。

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

6 个答案: