隐藏“加载更多：延迟加载中的按钮答案

【问题标题】：Hide "Load More: button in a lazy load隐藏“加载更多：延迟加载中的按钮
【发布时间】：2017-10-18 22:31:10
【问题描述】：

如果没有更多分配有 “display: none” 的项目，我想隐藏“加载更多”按钮。我有一个过滤器，它根据游览标准加载 HTML 列表——因此列表永远不会相同。

例如如果我只有一项或我只有 4 项并且没有要加载的内容，则加载更多按钮应该被禁用或不可见。

我有以下 HTML 脚本：

jQuery(function ($) {

    var tour_block = $(".tour");

    // count elements and find how many have display none
    /*
     var size_li = tour_block.size();
     alert( size_li );
     */


    tour_block.slice(0, 6).show();

    $("#loadMore").on('click', function (e) { alert("dd");
        e.preventDefault();

        var hidden_tour = $(".tour:hidden");

        hidden_tour.slice(0, 4).slideDown();
        if (hidden_tour.length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });

});

.tour {
  border: 1px solid red;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="results">
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
  <div class="tour">some tour content</div>
</div>

<a id="loadMore" href="#">Load More Tours</a>

【问题讨论】：

标签： jquery lazy-loading

【解决方案1】：

添加测试按钮：

<button id="test-button">Test Button</button>

使用这个脚本：

$('#test-button').on('click', function () {

    // Check if there are no hidden values (note ! prefix)
    // Select all with class 'tour' and filter for hidden items
    if (!$('.tour:hidden').length) {
        // Hide button
        $('#loadMore').hide();
    }

});

希望对你有帮助。

【讨论】：