我正在编写我的博客主题。我有这个按钮加载到entires,但我想让该按钮更改为"没有更多条目"一旦全部加载。任何线索?
<script>
$(document).ready(function () {
size_li = $(".all .one").size();
x=3;
$('.all .one:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('.all .one:lt('+x+')').fadeIn();
});
});
</script>
答案 0 :(得分:1)
在开始淡入项目后检查是否有任何隐藏元素。如果没有,只需显示消息。
$(document).ready(function() {
size_li = $(".all .one").size();
x = 3;
$('.all .one:lt(' + x + ')').show();
$('#loadMore').click(function() {
x = (x + 5 <= size_li) ? x + 5 : size_li;
$('.all .one:lt(' + x + ')').fadeIn();
if (!$(".all .one:hidden").length) {
// Do something when everything is loaded
$(this).replaceWith("<p>No more entries<p>");
}
});
});
&#13;
.one {
display: none;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="all">
<div class="one">1</div>
<div class="one">2</div>
<div class="one">3</div>
<div class="one">4</div>
<div class="one">5</div>
<div class="one">6</div>
<div class="one">7</div>
<div class="one">8</div>
<div class="one">9</div>
<div class="one">10</div>
</div>
<button id="loadMore">Load more</button>
&#13;
答案 1 :(得分:0)
您可以在点击事件中添加条件:
if( size_li == $('.all .one:visible').length ){
$(this).replaceWith('No more entries');
}
希望这有帮助。