是否可以使用 jquery 而不是 php 部分中的分頁來加載更多內容并隱藏以前的內容？
喜歡這個
$(function() {
$(".set").first().show();
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".set:visible").slideUp();
$(".set:visible").next().slideDown();
if ($(".set:visible").length == 1) {
$(".set:visible").slideUp();
$(".set").first().slideDown();
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
但在該示例中，內容位于單獨的 div 中。
我在谷歌和這里搜索但找不到答案。
uj5u.com熱心網友回復：
@DLK我在下面添加代碼作為您的問題的參考，請查看它，它可能會在邏輯上有所幫助。
$(function () {
$(".nextContent").slice(0, 2).show();
let $click = 0;
$("#loadMore").on('click', function (e) {
$click ;
$(".nextContent").slice(0, $click*2).hide();
e.preventDefault();
$(".nextContent:hidden").slice($click*2, $click*2 2).slideDown();
if ($(".nextContent:hidden").length == 0) {
$("#load").fadeOut('slow');
$('#loadmore').replaceWith("<p class='p'>No More</p>");
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});.nextContent {
display:none;
margin: 5px 0;
padding: 8px 0;
background: #eee;
border: 1px solid #ccc;
text-align: center;
}
#loadMore {
padding: 10px;
width: 100%;
display: block;
text-align: center;
background-color: #33739E;
color: #fff;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: #fff;
box-shadow: 0 1px 1px #ccc;
transition: all 600ms ease-in-out;
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-o-transition: all 600ms ease-in-out;
margin-top: 10px;
margin-bottom: 10px;
}
#loadMore:hover {
background-color: #eee;
color: #33739E;
}<html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="nextContent">Content1</div>
<div class="nextContent">Content2</div>
<div class="nextContent">Content3</div>
<div class="nextContent">Content4</div>
<div class="nextContent">Content5</div>
<div class="nextContent">Content6</div>
<div class="nextContent">Content7</div>
<a href="#" id="loadMore">Load More</a>
</html>謝謝：）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481779.html
上一篇：如果欄位為空，則不顯示屬性