Html 将“filter”和“load more”功能与jQuery相结合-如何仅从当前选定的筛选器类别加载项

在我的网站上，我目前有一个公文包网格库，可以使用纯CSS进行过滤。这并没有提供使用jQuery所能提供的所有功能，所以我将它从纯CSS改为jQuery。我希望通过jQuery添加以下功能：

按类别筛选项目，包括“全部”类别 仅从当前选定的筛选器类别加载更多项目 单击“加载更多”按钮时，根据屏幕大小加载不同数量的项目。我的意思是，当窗口足够宽，可以容纳4个项目时，我希望一次加载4个项目。当它的宽度只够3跨时，我希望一次加载3个，以此类推 我正在构建我的投资组合的最新演示

下面是我编写的jQuery代码

$(document).ready(function(){

  // Function to perform the filtering functionality
  
  $('.filters li a').click(function() {
    // fetch the class of the clicked item
    var ourClass = $(this).attr('class');

    // reset the active class on all the buttons
    $('.filters li').removeClass('active');
    // update the active state on our clicked button
    $(this).parent().addClass('active');

    if(ourClass == 'all') {
      // show all our items
      $('.posts').children('div.post').show();
    }
    else {
      // hide all elements that don't share ourClass
      $('.posts').children('div:not(.' + ourClass + ')').hide();
      // show all elements that do share ourClass
      $('.posts').children('div.' + ourClass).show();
    }
    return false;
  });

  // Use screen size to determine how many items to show on each load

  var numToShow = 4;
  $(window).resize(function(){
    if ($(window).width() > 1184) {
      numToShow = 4;
    } else if (1184 >= $(window).width() > 977) {
      numToShow = 3;
    } else if (976 >= $(window).width() > 545) {
      numToShow = 4;
    } else {
      numToShow = 4;
    }
  })

  // Function to perform the 'load more' functionality

  $(function () {
    $(".post").slice(0, numToShow).show();
    $("body").on('click touchstart', '.load-more', function (e) {
      e.preventDefault();
      $(".post:hidden").slice(0, numToShow).slideDown();
      if ($(".post:hidden").length == 0) {
    $(".load-more").css('visibility', 'hidden');
      }
      $('html,body').animate({
        scrollTop: $(this).offset().top
      }, 1000);
    });
  });
  
});

现在，过滤器工作得很好，但其他功能不行。我面临的问题是：

“加载更多”功能似乎忽略了当前选定的筛选器类别。当您选择一个类别，然后单击“加载更多”时，它将加载所有帖子，而不是仅加载同一类别中的更多帖子，而与当前选择的类别无关 我创建的“调整大小”功能用于标识窗口宽度并相应地更改加载的项目数量，但似乎不起作用。无论窗口大小如何，只要单击按钮，就会加载固定数量的项目 我相信我的jQuery代码可能只需要纠正几件事，但我现在不确定是什么。我会很感激你的帮助！我错过了什么？谢谢