Question

这是我到目前为止的代码：

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

HTML：

<div class="row">
    <div class="cat-item"></div>
    <div class="cat-item"></div>
<div class="cat-item"></div>
    (more here)
</div>

根据项目数量（每页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);
});

.cat-item在css中设置了display：none，并且有多个带有.prod-page类的按钮。

当点击.prod-page按钮时，我想。显示前12个元素，然后显示类.cat-item（未定义次数）的下12个元素。

知道如何处理这个问题吗？最好的是修改我已编写的代码。

Answer 1

试试这个 -

当您生成页面按钮时添加某种页面ID

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

Answer 2

这可能是您想要的方式..

http://jsfiddle.net/rahulrulez/f6cPa/

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

如何在js中单击时过滤元素？

2 个答案: