javascript加载更多按钮不起作用

Question

我试图从 https://www.solodev.com/blog/web-design/adding-a-load-more-button-to-your-content.stml 复制帖子添加加载更多按钮。

但是，它不起作用。这是我的 jsfiddle ，在这里我插入了 JS。

$(document).ready(function() {
  $(".moreBox").slice(0, 3).show();
  if ($(".blogBox:hidden").length != 0) {
    $("#loadMore").show();
  }
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $(".moreBox:hidden").slice(0, 6).slideDown();
    if ($(".moreBox:hidden").length == 0) {
      $("#loadMore").fadeOut('slow');
    }
  });
});

我希望在我的网站博客部分同时显示 3 篇文章。

Answer 1

您的 HTML 标记不正确

这一行是错误的:<id="loadMore"><a href="#" class="btn btn-primary">Load More</a>

也许你想要:

 <div id="loadMore"><a href="#" class="btn btn-primary">Load More</a></div>

我刚刚更新了 fiddle 中的 js，它应该可以工作:

$(document).ready(function() {
  $(".moreBox").slice(0, 3).show();
  if ($(".blogBox:hidden").length != 0) {
    $("#loadMore").show();
  }
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $(".moreBox:hidden").slice(0, 6).show().slideDown(); // Updated this line
    if ($(".moreBox:hidden").length == 0) {
      $("#loadMore").fadeOut('slow');
    }
  });
});