Jquery - 显示没有。的 div 隐藏其他的

Question

使用下面的 HTML 和 JS 代码来满足以下要求。显示前 3 个 div，隐藏其余部分。如果少于 3 个 div（根据数据显示），则隐藏“加载更多”按钮，否则显示。单击“加载更多”按钮后，会显示另外 3 个（根据数据显示值）。根据存在的项目显示/隐藏加载更多按钮。显示加载更多按钮仍然存在项目。否则隐藏加载更多按钮。var dataShow = $('.main-wrapper').attr('data-show');var getEle = $('.main-wrapper').find('.ele');if (getEle.length <= dataShow) {  $('.load-more').hide();} else {  $('.load-more').show();}let getEleLength = $('.ele').length;let showItems = dataShow - 1;//$('.ele').slice(0, 3).show();$('.ele:gt(' + showItems + ')').hide();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="main-wrapper" data-show="3">  <div class="ele">1</div>  <div class="ele">2</div>  <div class="ele">3</div>  <div class="ele">4</div>  <div class="ele">5</div></div><button class="load-more">Load more</button>

Answer 1

使用 计数 div length。基于此show()，hide()你的 div.

let size = $(".ele").length;

let x = parseInt($('.main-wrapper').data('show'));

$('.ele:lt(' + x + ')').show();

$('.load-more').click(function() {

  x = (x + 3 <= size) ? x + 3 : size;

  $('.ele:lt(' + x + ')').show();

  if (x == size) {

    $('.load-more').hide();

  }

});

.ele {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="main-wrapper" data-show="3">

  <div class="ele">1</div>

  <div class="ele">2</div>

  <div class="ele">3</div>

  <div class="ele">4</div>

  <div class="ele">5</div>

</div>

<button class="load-more">Load more</button>