Javascript 如何在js中过滤点击元素？

这是我目前掌握的代码：

$(".prod-page").each(function() {
    $(this).click(function() {
         $(".cat-item").filter(function(index) {
         // something goes here I guess?
         });
    });
});

HTML:

（这里有更多）

根据项目数（每页12个）动态添加页面按钮：

numItems=$（'.cat item'）。长度；
numPages=numItems/12；
lastPage=numItems%12；
对于（i=0；i=1）{
$（'#页面计数器'）。附加（''）；
}
$（“.prod页”）。每个（功能（i）{
$（此）.text（++i）；
});

.cat项有一个显示：在css中没有设置，并且class.prod页面有多个按钮

当单击.prod页面按钮时，我想.显示前12个元素，然后是带有class.cat项的下12个元素（未定义次数）

---

你知道怎么做吗？最好是修改我已经编写的代码。

这可能是您想要的方式

试试这个-

生成页面按钮时，请添加某种页面id

for (i = 0; i <= numPages; i++) {
    $('#page-counter').append('<div class="prod-page" data-pageid="'+i+'"></div>' );
}

for（i=0；i=（第i+1页）*12）{
$（$items[i]）.hide（）；
}
否则{
$（$items[i]）.show（）；
}
}
});

您可以发布您的html代码吗？我已经更新了我的问题，请检查上面的代码。当简要查看您的解决方案时，它似乎与我需要的最接近，但对我来说还没有完全起作用。它似乎在您第一次单击按钮时生成正确的div，但在单击另一个按钮时没有任何变化。我将页面ID同时添加到第一个。附加和第二个，您认为这可能导致此行为吗？抱歉！我的错误，它确实有效，thnx！我接受你的回答。唯一的问题是，它显示的是13项而不是12项，我应该修改什么使其成为12项？哎呀，只需将

I>（page_id+1）*12

更改为

I>=（page_id+1）*12

，就会在答案中修复。

numItems = $('.cat-item').length;
numPages = numItems / 12;
lastPage = numItems % 12;

for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

if (lastPage >= 1) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

$(".prod-page").each(function(i) {
$(this).text(++i);
});

$('li').filter(function( index ) {
    return index > 10;
  }).addClass('.cat-item');

for (i = 0; i <= numPages; i++) {
    $('#page-counter').append('<div class="prod-page" data-pageid="'+i+'"></div>' );
}

$(".prod-page").click(function() {
    var $button = $(this);
    var page_id = $button.data('pageid');
    var $items = $(".cat-item");
    for (var i=0; i< $items.length; i++) {
       if (i < page_id * 12 ||  i >= (page_id+1)*12 ) {
          $($items[i]).hide();
       }
       else {
          $($items[i]).show();
       }
    }
});