亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Jquery - 顯示沒有。的 div 隱藏其他的

Jquery - 顯示沒有。的 div 隱藏其他的

holdtom 2023-09-18 17:53:42
使用下面的 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>
查看完整描述

1 回答

?
紫衣仙女

TA貢獻1839條經驗 獲得超15個贊

使用 計數 div length?;诖藄how(),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>


查看完整回答
反對 回復 2023-09-18
  • 1 回答
  • 0 關注
  • 119 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號