javascript - 从 SP2013 迁移到 SP2019 时 jQuery 代码不起作用

Question

我有一段代码作为页面布局在 SP2013 上完美运行。代码的作用是从列表中加载元素，它显示前 4 个元素，然后当您单击“加载更多”按钮时，它会再加载 4 个元素，直到达到元素总数；当您单击重置按钮时，它会返回到 4 个元素。当我将代码迁移到 SP2019 并将其转换为 Web 部件时，元素不显示，它们在 DOM 中但不显示。我有一类 .content 设置为显示:无；当我删除它时，所有元素都会显示，但这不是预期的结果；我希望默认情况下只显示前 4 个元素，当单击“加载更多”时会再显示 4 个。奇怪的是它在SP2013上运行正常，但在2019上运行不正常，并且控制台没有显示任何错误。

<div class="content col-md-6"></div>

.content {
  display: none;
}

$(document).ready(function() {
        $(".content").slice(0, 4).show();
        $(".resetBtn").hide();
        var items = $(".content").length;
        var shown;

        $(".loadMore").click(function() {
          $(".resetBtn").show();
          shown = $(".content:visible").length + 4;
          if (shown < items) {
            $(".content:lt(" + shown + ")").show(300);
          } else {
            $(".content:lt(" + items + ")").show(300);
            $(".loadMore").hide();
          }
        });
        $(".resetBtn").click(function() {
          var end = $(".content").length;
          console.log(end);
          $(".content").slice(4, end).hide(300);
          $(".loadMore").show();
          $(".resetBtn").hide();
        });
      });

Answer 1

我只需要将脚本移动到 ajax 调用中

var buildManagersCards = function(items) {
var managersContent = $("#managersContent");

for (let i = 0; i < items.length; i++) {
//build cards
var managersCards =
'<div class="content col-md-6"><div class="single-news mb-4"><div class="row"><div class="col-md-3"><div class="view overlay rounded z-depth-1 mb-4"><img class="img-fluid" src="' + items[i].Image.Url +'" alt="' + items[i].Title + '" /><a><div class="mask rgba-white-slight waves-effect waves-light"></div></a></div></div><div class="col-md-9"><p class="font-weight-bold dark-grey-text">' + items[i].Title +
'</p><div class="d-flex justify-content-between"><div class="col-11 pl-0 mb-3 managerDescription"><div>' + items[i].Description+'</div><div class="managerDate"><small>' + items[i].date+'</small></div><a data-toggle="modal" data-target=#basicExample'+items[i].ID+'><span class="modalButton" >Read More</span></a></div><a data-toggle="modal" data-target=#basicExample'+items[i].ID+'><i class="fas fa-angle-double-right modalArrow"></i></a></div></div></div></div></div>'; 
managersContent.prepend(managersCards);
}

};

var buildModal = function(items) {
var modalContent = $('#modalContent');

for (let i = 0; i < items.length; i++) {

var modalContentCard = '<div class="modal fade" id=basicExample'+ items[i].ID+'  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog modal-lg"  role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel"><strong>' + (items[i].Title || ' ') +
'</strong></h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><h5>Personal:</h5><p><strong>A dream I have is to:</strong> '+ (items[i].Dream || ' ') +'</p><p><strong>You would be surprised to learn that I:</strong>'+ (items[i].Learn || ' ') +'</p><p><strong>My motto is:</strong>'+( items[i].Motto || ' ') +
'</p><p><strong>The mission of our agency is:</strong>'+ (items[i].Mission || ' ') +'</p><hr><h5>Our current priorities are:</h5><p>'+ (items[i].Priorities || ' ') +'</p><h5>Our biggest accomplishments in the past year include:</h5><p>'+ (items[i].Accomplishments || ' ') +'</p><div class="agency"><h5>One thing you did not know about our agency is:</h5><p>'+ (items[i].Agency || ' ')+'</p></div><div class="mt-3 mb-3"><a href="'+ (items[i].Link.Url || ' ') +'" target="_blank">'+ (items[i].Website || ' ') +'</a></div><div class="modal-footer"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></div></div></div></div></div>';
modalContent.prepend(modalContentCard);
}

};

//ajax call
var url1 =
"/ManagersMoments/_api/web/lists/GetByTitle('managersMoments')/items";
var handle_ajax = function(url) {
$.ajax({
url: url,
method: "GET",
headers: {
Accept: "application/json; odata=verbose"
},
success: function(data) {
var items = data.d.results;
console.log(items);

buildManagersCards(items);
buildModal(items);
$(".content").slice(0, 4).show();
        $(".resetBtn").hide();
        var items = $(".content").length;
        var shown;

        $(".loadMore").click(function() {
          $(".resetBtn").show();
          shown = $(".content:visible").length + 4;
          if (shown < items) {
            $(".content:lt(" + shown + ")").show(300);
          } else {
            $(".content:lt(" + items + ")").show(300);
            $(".loadMore").hide();
          }
        });
        $(".resetBtn").click(function() {
          var end = $(".content").length;
          console.log(end);
          $(".content").slice(4, end).hide(300);
          $(".loadMore").show();
          $(".resetBtn").hide();
        });

},
error: function(data) {
console.log("Error: " + data);
}

});

};

handle_ajax(url1);