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>

我刚刚更新了小提琴中的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');
    }
  });
});

Answer 2

请使用此fiddle

我添加了jquery.min.js文件。

也更新了这一行。

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

Answer 3

你有一些基本的错误，你应该能够一目了然。

1）代码编辑器中突出显示的语法错误：

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

这看起来像是有效的HTML吗？将ID属性移动到锚标记。

2）jQuery Slim没有slideDown功能 - 它是超薄版本

您可能已经注意到在修复语法问题后打开控制台并注意到有关于不存在的函数的异常。

3）虽然代码现在可以使用，但它最多只能用于6个项目，您可以猜到为什么！

$(".moreBox:hidden").slice(0, $(".moreBox:visible").length + 3).slideDown();

工作小提琴：https://jsfiddle.net/ecxervpj/1/

Answer 4

更改你的jQuery ..我希望这段代码对你有帮助

$(document).ready(function(){
      $("#loadMore").on('click',function(e){
        e.preventDefault();
        $(".moreBox").show();
      });
});

javascript加载更多按钮不起作用

4 个答案: