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

Question

我想分别加载前 3 个列表项 div.content，然后在用户单击“显示更多”时显示接下来的 3 个项目

当用户点击“SHOW LESS”时，返回显示块前3个列表

我看到另一个答案 参考。 jQuery load first 3 elements, click “load more” to display next 5 elements

但我不能申请我的代码

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

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

这是我的 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

以下 sn-p 显示如何在点击显示更多时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>

Answer 2

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

这种方法不会隐藏 Show less 或 Show more 链接

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 3

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

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