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

Question

使用下面的 HTML 和 JS 代码来满足以下要求。

1. 显示前 3 个 div，隐藏其余部分。

2. 如果少于 3 个 div（根据数据显示），则隐藏“加载更多”按钮，否则显示。

3. 单击“加载更多”按钮后，会显示另外 3 个（根据数据显示值）。根据存在的项目显示/隐藏加载更多按钮。

4. 显示加载更多按钮仍然存在项目。否则隐藏加载更多按钮。

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() {&nbsp; x = (x + 3 <= size) ? x + 3 : size;&nbsp; $('.ele:lt(' + x + ')').show();&nbsp; if (x == size) {&nbsp; &nbsp; $('.load-more').hide();&nbsp; }});.ele {&nbsp; 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">&nbsp; <div class="ele">1</div>&nbsp; <div class="ele">2</div>&nbsp; <div class="ele">3</div>&nbsp; <div class="ele">4</div>&nbsp; <div class="ele">5</div></div><button class="load-more">Load more</button>