使用Jquery每3个元素显示更多/更少

Question

我想加载每个div.content的前3个列表项，然后在用户单击“ SHOW MORE”时显示下3个项

并且当用户单击“ SHOW LESS”时，返回显示阻止的前3个列表

我看到了另一个答案。 jQuery加载前3个元素，单击“加载更多”以显示后5个元素

但是我不能应用于我的代码

我怎样才能最好地做到这一点？

注意：对不起，我的英语不好。

这是我的HTML

 <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <a href="#" id="ShowMore">SHOW MORE</a> <a href="#" id="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">11</div> <div class="items">12</div> <div class="items">13</div> <div class="items">14</div> <div class="items">15</div> <div class="items">16</div> <div class="items">17</div> <div class="items">18</div> <div class="items">19</div> <a href="#" id="ShowMore">SHOW MORE</a> <a href="#" id="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">21</div> <div class="items">22</div> <div class="items">23</div> <div class="items">24</div> <div class="items">25</div> <div class="items">26</div> <div class="items">27</div> <div class="items">28</div> <div class="items">29</div> <a href="#" id="ShowMore">SHOW MORE</a> <a href="#" id="ShowLess">SHOW LESS</a> </div> 

Answer 1

• 标识符必须是唯一的，此方法会将这些ID更改为类。
• 您可以使用此选择器隐藏.items的其余部分： .items:gt(2)
• 这些链接（越来越少）具有指示操作的data-attribute 。

这种方法不会隐藏“少显示也不显示更多”链接

 var parentSelector = "div.content", showItemsSelector = ".items:gt(2)", showLessSelector = ".ShowMore,.ShowLess"; $(document).ready(function() { $(parentSelector).each(showItemsHandler); $(showLessSelector).on('click', showHideHandler); }); function showHideHandler() { if ($(this).data('action') === 'show') $(this).closest(parentSelector).children('.items').show(); else showItemsHandler.bind($(this).closest(parentSelector))(); } function showItemsHandler() { $(this).children(showItemsSelector).hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <a href="#" data-action='show' class="ShowMore">SHOW MORE</a> <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">11</div> <div class="items">12</div> <div class="items">13</div> <div class="items">14</div> <div class="items">15</div> <div class="items">16</div> <div class="items">17</div> <div class="items">18</div> <div class="items">19</div> <a href="#" data-action='show' class="ShowMore">SHOW MORE</a> <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">21</div> <div class="items">22</div> <div class="items">23</div> <div class="items">24</div> <div class="items">25</div> <div class="items">26</div> <div class="items">27</div> <div class="items">28</div> <div class="items">29</div> <a href="#" data-action='show' class="ShowMore">SHOW MORE</a> <a href="#" data-action='hide' class="ShowLess">SHOW LESS</a> </div> 

Answer 2

这是对引用的答案中的代码的改编：

 $(document).ready(function() { $('.items').hide(); $('.content').find('.items:lt(3)').show(); $('.ShowMore').click(function(ev) { $(ev.currentTarget).parent().find('.items').show(); }); $('.ShowLess').click(function(ev) { $(ev.currentTarget).parent().find('.items').not(':lt(3)').hide(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">11</div> <div class="items">12</div> <div class="items">13</div> <div class="items">14</div> <div class="items">15</div> <div class="items">16</div> <div class="items">17</div> <div class="items">18</div> <div class="items">19</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">21</div> <div class="items">22</div> <div class="items">23</div> <div class="items">24</div> <div class="items">25</div> <div class="items">26</div> <div class="items">27</div> <div class="items">28</div> <div class="items">29</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div> 

Answer 3

以下代码段显示了如何在单击“显示更多”时show next three items ，并在单击“显示较少”时collapse back to the first three items 。

将ID更改为CLASS，因为这样做是正确的方法。 多个元素不应具有相同的ID。

说明
首先使用以下选择器隐藏除前三个以外的所有项目：
.content .items:nth-child(n+1):nth-child(-n+3)

然后，单击“显示更多”按钮，使用以下选择器找到接下来的三个隐藏项目：
.items:not(:visible):lt(3)
此选择器选择不可见的前三个项目。

最后在Show Less中，隐藏所有元素，并像以前一样仅显示前三个元素。

 $(function(){ $('.content .items').hide(); $('.content .items:nth-child(n+1):nth-child(-n+3)').show(); $('.ShowMore').click(function(){ $(this).closest('.content').find('.items:not(:visible):lt(3)').show(); }) $('.ShowLess').click(function(){ $(this).closest('.content').find('.items').hide(); $(this).closest('.content').find('.items:lt(3)').show(); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">11</div> <div class="items">12</div> <div class="items">13</div> <div class="items">14</div> <div class="items">15</div> <div class="items">16</div> <div class="items">17</div> <div class="items">18</div> <div class="items">19</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div> <div class="content"> <div class="items">21</div> <div class="items">22</div> <div class="items">23</div> <div class="items">24</div> <div class="items">25</div> <div class="items">26</div> <div class="items">27</div> <div class="items">28</div> <div class="items">29</div> <a href="#" class="ShowMore">SHOW MORE</a> <a href="#" class="ShowLess">SHOW LESS</a> </div>