如何隐藏列表中的元素并添加'show more'功能？

Question

我使用javascript来构建结果列表。我有一个for循环，它迭代一些数据并创建一个mydatadiv，并将其添加到resultsdiv中。让我们假设它看起来像这样:

<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是每次点击"显示更多"显示的结果数量。如果显示所有结果，则链接将消失。

Answer 3

你可以创建一个这样的CSS类:

.hiddenData { display: none }

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

之后，创建用于从所需数量的div中添加/删除该类的处理程序。

jQuery用于移除类:

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

Answer 4

创建一个类，如下:

.hidden_class{
  display: none;
}

将这个类添加到所有你不想看到的mydatadiv中。当用户点击按钮时，将其从接下来的5个div中移除。

每次用户点击"read more"按钮时重复

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且高于total的页面。但这很容易。

EDIT:这里你已经运行了:http://jsfiddle.net/U8Q4Z/

希望这对你有帮助。欢呼。