如何隱藏列表中的元素並添加“顯示更多”功能？

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/

希望這可以幫助。 干杯。