使用下面的 HTML 和 JS 代碼來(lái)滿(mǎn)足以下要求。顯示前 3 個(gè) div，隱藏其余部分。如果少于 3 個(gè) div（根據(jù)數(shù)據(jù)顯示），則隱藏“加載更多”按鈕，否則顯示。單擊“加載更多”按鈕后，會(huì)顯示另外 3 個(gè)（根據(jù)數(shù)據(jù)顯示值）。根據(jù)存在的項(xiàng)目顯示/隱藏加載更多按鈕。顯示加載更多按鈕仍然存在項(xiàng)目。否則隱藏加載更多按鈕。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貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
使用 計(jì)數(shù) 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>
- 1 回答
- 0 關(guān)注
- 126 瀏覽
添加回答
舉報(bào)
0/150
提交
取消