如果加载了所有 div

Question

我正在编写我的博客主题。我有这个按钮可以全部加载，但我想在所有加载完成后将该按钮更改为 "No more entries"。有什么线索吗？

  <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>

Answer 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>");
    }
  });

});

.one {
  display: none;
}

<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>

Answer 2

您可以在点击事件中添加条件：

if( size_li == $('.all .one:visible').length ){
     $(this).replaceWith('No more entries');
 }

希望对您有所帮助。

如果加载了所有 div

If all divs loaded

html

javascript

shopify