JQuery“加载更多”按钮没有显示它想要显示的内容

Question

我正在使用 tabletop.js 将电子表格中的内容提取到我的网页，然后尝试使用 jQuery 隐藏部分内容以改善用户体验。但是，加载更多按钮没有显示我需要先显示的预期内容。它隐藏了一切。

这是我的代码。请看一下。

https://codepen.io/ru-musngi/pen/YzKLdLG

$(function () {
    $(".cnt-text").slice(0, 5).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $(".cnt-text:hidden").slice(0, 5).slideDown();
        if ($(".cnt-text:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

Answer 1

首先请注意，您的 <h1> 没有正确关闭，应该是 </h1> 而不是 <h1/>

其次，可以加$(".cnt-text:not(:hidden)").slideUp().remove();。那应该隐藏那些你已经看过的。

演示

var publicSpreadsheetUrl =
  "https://docs.google.com/spreadsheets/d/16m_ntyTklbsyT3OHprGdLa4nu_o4vYK3Ys4COXwpFrc/pubhtml";

function init() {
  Tabletop.init({
    key: publicSpreadsheetUrl,
    callback: showInfo,
    simpleSheet: true
  });
}
window.addEventListener("DOMContentLoaded", init);

function showInfo(data, tabletop) {
  console.log(data);
  for (var i = 0; i < data.length; i++) {
    $(".content").append('<div class="cnt-text">' + data[i].content + "<div>");
  }
  var element = document.getElementById("spinner");
  element.parentNode.removeChild(element);
}

$(function() {
  $(".cnt-text")
    .slice(0, 5)
    .show();
  $("#loadMore").on("click", function(e) {
    e.preventDefault();
    $(".cnt-text:not(:hidden)").slideUp().remove();
    $(".cnt-text:hidden")
      .slice(0, 5)
      .slideDown();
    if ($(".cnt-text:hidden").length == 0) {
      $("#load").fadeOut("slow");
    }
    $("html,body").animate({
        scrollTop: $(this).offset().top
      },
      1500
    );
  });
});

.cnt-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.2/tabletop.min.js"></script>
<h1>Content</h1>
<div class="content">

</div>
<a href="#" id="loadMore">Load more</a>

Answer 2

感谢您的所有回答。

我自己想出了一些办法。

在CSS中，我只是用了:nth-child(n+6)来显示前五个结果！

JQuery“加载更多”按钮没有显示它想要显示的内容

JQuery Load More button doesn't show the content it intends to show

javascript

jquery

tabletop.js