Javascript 从SP2013迁移到SP2019时jQuery代码不工作_Javascript_Jquery_Html_Css_Sharepoint

Javascript 从SP2013迁移到SP2019时jQuery代码不工作

javascript jquery html css sharepoint

Javascript 从SP2013迁移到SP2019时jQuery代码不工作,javascript,jquery,html,css,sharepoint,Javascript,Jquery,Html,Css,Sharepoint,我有一个在SP2013上作为页面布局完美运行的代码。代码所做的是从列表中加载项目，它显示前4个项目，然后当您单击“加载更多”按钮时，它将再加载4个项目，直到达到项目总数；单击重置按钮时，返回到4项。当我将代码迁移到SP2019并将其转换为web部件时，这些项不会显示，它们在DOM中，但不会显示。我有一个.content类设置为显示：无；当我删除它的所有项目显示，但这不是预期的结果；我希望默认情况下只显示前4个项目，单击load more时会显示4个项目。奇怪的是，它在SP2013上正常工作，但在

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

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

$（文档）.ready（函数（）{
$（“.content”）.slice（0,4.show（）；
$（“.resetBtn”）.hide（）；
变量项=$（“.content”）.length；
所示的var；
$（“.loadMore”）。单击（函数（）{
$（“.resetBtn”）.show（）；
显示=$（“.content:可见”）。长度+4；
如果（显示<项）{
$（“.content:lt（“+show+”））.show（300）；
}否则{
$（“.content:lt（“+items+”））.show（300）；
$（“.loadMore”）.hide（）；
}
});
$（“.resetBtn”）。单击（函数（）{
var end=$（“.content”）.length；
控制台日志（结束）；
$（“.content”）.slice（4，end）.hide（300）；
$（“.loadMore”）.show（）；
$（“.resetBtn”）.hide（）；
});
});

我只需将脚本移动到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);

var buildManagersCards=函数（项）{
var managersContent=$（“#managersContent”）；
for（设i=0；i

无论您遇到什么错误，它都会起作用console@NegiRox没有与代码相关的错误。我只知道我丢失了一个图像，但我不认为这与此有关，是吗？你在网站集管理中启用了脚本吗？是it modern页面吗？我在SP中是新手，我在哪里启用脚本？

$(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();
        });
      });

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);