时间戳

首页 > 解决方案 > JQuery 加载更多按钮不显示它打算显示的内容

javascript - JQuery 加载更多按钮不显示它打算显示的内容

问题描述

我正在使用 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);
    });
});

标签： javascriptjquerytabletop.js

解决方案

首先，请注意您没有关闭您的<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>

推荐阅读