1

对开发有点陌生，所以请多多包涵。

我有一个按钮可以在单击时删除“.hidden”类。删除所有“.hidden”类后，我想隐藏“.load-more”元素。

var $grid_item_div = $('.grid-item');
grid_item_show = 20;

if ($grid_item_div.length > 5) {
  $grid_item_div.slice(-10).addClass("hidden");
}

$('body').on('click', '.show-content', function() {
  $('.hidden:lt(' + grid_item_show + ')').removeClass('hidden');
});

$grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

$('body').on('click', '.show-content', function() {
  $grid.masonry('layout');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://masonry.desandro.com/v2/jquery.masonry.min.js"></script>

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
  <div class="grid-item hidden"></div>
</div>
<div class="load-more"><button class="show-content">Load More</button</div>

代码笔： https ://codepen.io/ddavis82/pen/eYmzOYd

实现这一目标的最佳方法是什么？提前致谢

4

2 回答 2

1

假设hidden隐藏一个元素...

 $('.grid-item').removeClass('hidden');
 $('.load-more').addClass('hidden');

在考虑之后进行编辑，你一次删除一个隐藏的类，所以你可能想检查是否还有更多的存在......

if (!$('.grid-item.hidden').length)//checks if there's any left
{
    $('.load-more').addClass('hidden');
}
于 2019-12-12T17:09:47.417 回答
0

删除隐藏类后，将此验证用于删除 .hidden 的操作：

if (!$(".hidden")[0]){
   $(".load-more").hide();
}
于 2019-12-12T17:17:09.840 回答