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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6565043/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:07:10  来源:igfitidea点击:

How can I hide elements in my list and add a 'show more' feature?

javascriptjqueryhtmlcsshtml-lists

提问by whoabackoff

I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:

我正在使用 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>

What I want to do is only display 5 results at a time, and should the user wish to see more, they can click a show next 5or show morebutton (or something similar). Any ideas?

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

Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.

只是为了澄清,每次用户单击“显示更多”时,我都想“取消隐藏”接下来的 5 个元素,而不是所有其余元素。所以每次点击都会显示更多元素,直到所有元素都显示出来。

回答by Niklas

You can use the gt()and lt()selectors along with :visiblepretty well here.

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

The following will show the next 5 results on clicking and removes the link once all items are 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;
    })
);

working example: http://jsfiddle.net/niklasvh/nTv7D/

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

Regardless of what other people are suggesting here, I would nothide the elements using CSS, but do it in JS instead, because if a user has JS disabled and you hide the elements using CSS, he won't get them visible. However, if he has JS disabled, they will never get hidden, nor will that button appear etc, so it has a full noscript fallback in place + search engines don't like hidden content (but they won't know its hidden if you do it on DOM load).

不管什么其他人所提出的建议在这里的,我会不会隐藏使用CSS的元素,但这样做在JS代替,因为如果用户有JS禁用和隐藏使用CSS的元素,他不会让他们看到。但是,如果他禁用了 JS,它们将永远不会被隐藏,该按钮也不会出现等,因此它有一个完整的 noscript 回退+搜索引擎不喜欢隐藏的内容(但如果你在 DOM 加载时执行此操作)。

回答by Tadeck

My solution is here: jsFiddle.

我的解决方案在这里:jsFiddle

You can put this link somewhere:

你可以把这个链接放在某个地方:

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

and use the following code:

并使用以下代码:

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();
    }
});

where limitis your current number of results displayed and per_pageis number of results shown with each click on "show more". The link disappears if all the results are displayed. See how it works on jsFiddle.

哪里limit是您当前显示的结果数量,per_page是每次单击“显示更多”时显示的结果数量。如果显示所有结果,该链接将消失。看看它如何在 jsFiddle 上工作的

回答by Igor Dymov

You can create a CSS class like:

您可以创建一个 CSS 类,例如:

.hiddenData { display: none }

and attach it to any quantity of divs that exceeds 5.

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

After that make handlers for adding/deleting this class from the needed quantity of divs.

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

jQuery for class removing:

用于删除类的 jQuery:

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

回答by YonoRan

Create a class with something like:

创建一个类,类似于:

.hidden_class{
  display: none;
}

Add this class to all the mydata div's that you dont want seen. when the user click the button, remove it from the next 5 div's.

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

repeat everytime the user clicks the "read more" button

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

回答by kheya

This should work...Let me know how it goes

这应该有效......让我知道它是怎么回事

<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>

In your forloop, you also have to add these divs hidden container

在你的 forloop 中,你还必须添加这些 divs 隐藏容器

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

You get the idea.

你明白了。

回答by Edgar Villegas Alvarado

Here you have:

在这里你有:

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

Now the script

现在脚本

   <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>

And a sample html:

和一个示例 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>

The only thing remaining is to validate fot not going to a page lower than 1 and higher than the total. But that will be easy.

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

EDIT: Here you have it running: http://jsfiddle.net/U8Q4Z/

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

Hope this helps. Cheers.

希望这可以帮助。干杯。