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

时间：2018-04-17 11:54:58

标签： javascript jquery html

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

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

我看到了另一个答案 REF。 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>

3 个答案:

答案 0 :(得分：0)

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

此方法不会隐藏显示更少或显示更多链接

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

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
$(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();
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

以下代码段显示了如何点击“显示更多内容”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>

相关问题
最新问题