Infinite Ajax Scroll：如果最后隐藏加载更多按钮的父容器答案

【问题标题】：Infinite Ajax Scroll: Hide parent container of load more button if lastInfinite Ajax Scroll：如果最后隐藏加载更多按钮的父容器
【发布时间】：2022-01-25 13:52:32
【问题描述】：

我在我的博客上使用Infinite Ajax Scroll 进行分页。当没有更多要加载的帖子时，我想隐藏trigger（按钮）父容器（目前，它只有opacity: 0，但这会留下不需要的空白）。

在控制台中，我可以看到IAS 留下一条消息说“没有更多的页面要加载”，所以我知道有一种方法可以检查是否存在更多帖子。但是，应用了两种方法，我无法让它发挥作用。

方法一：使用last:function() 方法二：检查trigger是否有opacity: 0，如果有则隐藏父容器

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@webcreate/infinite-ajax-scroll@3.0.0-beta.6/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 docs，还尝试了以下操作，但是，这只是在页面加载时将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
  }
  
},

【问题讨论】：

你试过了吗：display: none？另外，如果要隐藏块，是否选择最父元素？两者都可以在这里为您提供帮助。
嗨@DennisvandeHoef - 是的，我也试过.css("display","none") 而不是addClass("d-none")，它不应用css（也没有添加类）。不确定你的信息的后半部分是什么意思？我要隐藏的元素是.pagination-hide

标签： javascript jquery css infinite-ajax-scroll

【解决方案1】：

似乎您还需要添加一个 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';
  }
  
},

【讨论】：

【解决方案2】：

抱歉，您走的路很糟糕。如果您有其他内容而不是隐藏不必要的内容，则应该显示按钮<a class="loadmore">Load more</a>。根是错误的。您在 DOM 渲染中调用了不必要的操作。你最好重写你的代码。

【讨论】：

这可能是对上述代码的正确评估，但如果您提供一些简单示例来说明当前实现中的问题所在以及如何修复它，将会有所帮助？或者只是发布您可能如何解决其中一些问题。

【解决方案3】：

AFAICT，您的第一次尝试就走在了正确的轨道上 - the last event 似乎完全是做您需要的正确方法。但是文档还显示you need to bind event handlers with .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);

有a similar example in the docs。

【讨论】：

【解决方案4】：

您只需为触发器ref 提供show 和hide 函数。库在最后一个事件上自动调用函数。
演示网站https://zyf5k.csb.app/
密码沙盒https://codesandbox.io/s/zen-volhard-zyf5k?file=/index.js
供参考的代码：

window.ias = new InfiniteAjaxScroll(".container", {
  item: ".item",
  next: nextHandler,
  trigger: {
    element: ".loadmore",
    show: function (element) {
      element.parentElement.style.display = "block";
    },

    hide: function (element) {
      //hide desired element`
      element.parentElement.style.display = "none";
    }
  }
});

注意：没有意识到@Kevin 已经回答了这个问题。发布答案以获取更多信息。

【讨论】：