隐藏“加载更多:按钮在一个懒惰的负载
问题描述:
我想隐藏”加载更多“按钮,如果没有更多的项目”显示:无“分配给他们我有一个过滤器加载基于游览条件的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>
答
添加一个按钮来进行测试:
<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();
}
});
希望它能帮助。