該賞金過期7天。回答這個問題有資格獲得 50聲望獎勵。 Freddy想引起更多人對這個問題的關注。
我在我的博客上使用Infinite Ajax Scroll進行分頁。當沒有更多帖子要加載時，我想隱藏trigger（按鈕）父容器（目前，它只有opacity: 0，但這會留下不需要的空白）。
在控制臺中，我可以看到IAS一條訊息說“沒有更多的頁面要加載”，所以我知道有一種方法可以檢查是否存在更多帖子。但是，應用了兩種方法后，我無法讓它發揮作用。
方法 1：使用last:function()
方法 2：檢查triggerhas opacity: 0，如果有則隱藏父容器
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@webcreate/[email protected]/dist/infinite-ajax-scroll.min.js"></script>
<div class="container pagination-hide">
<div class="row">
<div class="col-12">
<div class="pagination">
<a class="loadmore">Load more</a>
</div>
</div>
</div>
</div>
<script>
$(function() {
var ias = new InfiniteAjaxScroll('.insertPosts', {
item: '.insertCard',
pagination: '.blog-pagination',
next: '.next-posts-link',
trigger: '.loadmore',
loadOnScroll: false,
last:function(){
$(".pagination-hide").addClass("d-none");
}
});
// $('.loadmore').click(function(){
// if ( $(this).css('opacity') == '0' ) {
// console.log("true");
// $(this).parent(".pagination-hide").addClass("d-none");
// }
// });
});
</script>根據IAS 檔案，還嘗試了以下操作，但是，這只是將d-none類添加到pagination-hide頁面加載中，而不是在沒有更多帖子加載時添加類（應該如此）。
trigger: {
element: '.loadmore',
// this function is called when the button has to be hidden
hide: function(element) {
$(element).closest(".pagination-hide").addClass("d-none");
element.style.opacity = '0'; // default behaviour
}
},uj5u.com熱心網友回復：
對不起，但你走的路不好。<a >Load more</a>如果您有其他一些內容而不是隱藏不必要的內容，您應該顯示按鈕。根是錯的。您正在 DOM 渲染中呼叫不必要的操作。你最好重寫你的代碼。
uj5u.com熱心網友回復：
似乎您還需要添加一個 show() 方法來取消 hide() 中的更改，以獲得正確的行為：
trigger: {
element: '.loadmore',
// this function is called when the button has to be hidden
hide: function(element) {
$(element).closest(".pagination-hide").addClass("d-none");
element.style.opacity = '0'; // default behaviour
},
show: function(element) {
$(element).closest(".pagination-hide").removeClass("d-none");
element.style.opacity = '1';
}
},uj5u.com熱心網友回復：
AFAICT 您在第一次嘗試時就走在了正確的軌道上 -該last活動似乎是做您需要的正確方式。但是檔案還表明您需要使用 系結事件處理程式.on()，而不是將它們作為選項傳遞，這是您嘗試過的。
例如，這樣的事情：
var ias = new InfiniteAjaxScroll('.insertPosts', {
// ... your options
// last:function(){} // <-- won't work, not the way to bind event handlers
});
// What we want to happen when we've hit the last page
function noMorePages() {
$(".pagination-hide").addClass("d-none");
}
// Handle the "last" event with our function
ias.on('last', noMorePages);
檔案中有一個類似的例子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395255.html
標籤：javascript 查询 css 无限ajax滚动
下一篇：固定滑塊的標題