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加载更多按钮未显示其打算显示的内容

2 个答案: