代码之家 › 专栏 › 技术社区 › user1616270

隐藏“加载更多:延迟加载中的按钮”

lazy-loading jquery

user1616270 · 技术社区 · 7 年前

“显示:无” 分配给他们。我有一个过滤器,根据巡演标准加载HTML列表,因此列表从不相同。

E、 g.如果我只有一个项目或我只有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>

1 回复 | 直到 7 年前

RickL 7 年前

添加测试按钮:

<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();
    }

});

希望有帮助。

推荐文章

M'sieur Toph' · Angular 5-在组件内部获取懒散加载的模块根路径

7 年前

gooamoko · 我可以用lazy init使用RmiServiceExporter吗?

7 年前

livthomas · 如何在Angular应用程序中延迟加载库

7 年前

Sameer · 为延迟加载的模块创建公共模块

7 年前

Mohammad Shadmehr · 为什么我必须在Linq查询中包含其他实体?

7 年前

Anika · 调用onCellEdit时,DataTable的RowKey为null

7 年前

Philip Feldmann · 帆。js延迟加载模型

7 年前

Perp · 如何将Web包中的节点模块与异步块分离?

7 年前

Bob Ramsey · 需要关于延迟加载mat手风琴内容的帮助

7 年前

JSON · 如何将子组件设置为路由器出口的默认路由?[副本]

7 年前