Question

开发方面有一些新知识，请多多包涵。

我有一个按钮，当单击该按钮时会删除类“ .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>

Codepen：https://codepen.io/ddavis82/pen/eYmzOYd

什么是实现这一目标的最佳方法？预先感谢

Answer 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');
}

Answer 2

将此验证放在删除隐藏类之后删除.hidden的操作中：

if (!$(".hidden")[0]){
   $(".load-more").hide();
}

jQuery-删除类后隐藏元素

2 个答案: