Javascript 我的筛选和分页代码中有两个小问题

大家好，我希望你们能帮助我修复我的代码，这样我就可以让它工作得很好

当我在搜索框中过滤卡片时，分页模式会放置很多卡片，我只希望每页9张

我想让左右箭头工作得很好

我希望你们能帮我解决这个问题，谢谢-1） }); }); 页面大小=9； showPage=功能（第页）{ $（“.card”）.hide（）； $（“.card”）。每个功能（n）{ 如果（n>=pageSize*（第1页）和&n

.searchBar{
背景：rgb（14226,14）；
填充：10px；
宽度：200px；
边界半径：5px；
保证金：自动；
}
.搜索栏>输入{
填充：10px；
边界半径：5px；
}
.卡片{
背景：rgb（140255140）；
填充：10px；
边界半径：5px；
文本对齐：居中；
}
.分页{
背景：紫罗兰色；
保证金：自动；
宽度：300px；
文本对齐：居中；
填充：10px；
}
.页码a{
填充：10px；
过渡：.3s；
文字装饰：无；
}
.分页a：悬停{
背景：rgb（192,91192）；
}
.pagActive{
背景：蓝色；
颜色：#fff；
}
.行{
显示器：flex；
}
.栏目{
宽度：33.33%；
填充：10px；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.栏目{
宽度：100%；
}
}

标题1
说明1

标题2
说明2

标题3
说明3

标题4
说明4

标题5
说明5

标题6
说明6

标题7
说明7

标题8
说明8

标题9
说明9

标题10
说明10

标题11
说明11

标题12
说明12

要在搜索后显示正确数量的元素，您可以稍微修改

showPage

方法并在内部进行过滤

showPage = function(page, searchTerm) {
   let $filteredCards = $(".card");
   if (searchTerm) { //if some search text is present, filter... if not - take all cards
     $filteredCards = $filteredCards.filter(function() {
       return $(this).text().toLowerCase().indexOf(searchTerm) > -1;
     });
   }
   $(".card").hide();
   $filteredCards.each(function(n) {
     if (n >= pageSize * (page - 1) && n < pageSize * page)
       $(this).show();
   });
}

标题1
说明1

标题2
说明2

标题3
说明3

标题4
说明4

标题5
说明5

标题6
说明6

标题7
说明7

标题8
说明8

标题9
说明9

标题10
说明10

标题11
说明11

标题12
说明12

嗨！我根据您的代码为您的问题添加了一个片段，请检查是否所有内容都正确，谢谢！