如何修复选项卡中不起作用的“加载更多”功能？

Question

我的网站主页上有一些jQuery排序逻辑。我尝试使用loadMor实现排序功能，但它根本无法正常工作。这是因为所有div均由内联CSS设置样式。当我替换了将jQuery排序到选项卡的功能时，我仍然遇到相同的问题。

我将jQuery用于选项卡并加载更多内容。

$(document).ready(function() {
  $("#portfoliolist div").slice(0, 30).show();
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $("#portfoliolist div:hidden").slice(0, 6).slideDown();
    if ($("#portfoliolist div:hidden").length == 0) {
      $("#loadMore").fadeOut('slow');
    }
    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 1500);
  });

});

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("portfolio");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("filters");
var btns = btnContainer.getElementsByClassName("filter");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

$(document).ready(function() {
  $("#portfoliolist div").slice(0, 30).show();
  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    $("#portfoliolist div:hidden").slice(0, 6).slideDown();
    if ($("#portfoliolist div:hidden").length == 0) {
      $("#loadMore").fadeOut('slow');
    }
    $('html,body').animate({
      scrollTop: $(this).offset().top
    }, 1500);
  });
});

filterSelection("all")

function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("portfolio");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {
      element.className += " " + arr2[i];
    }
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("filters");
var btns = btnContainer.getElementsByClassName("filter");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

请帮助我！