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

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 有一个 display: none set in css 并且有多个类为 .prod-page 的按钮。

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

知道如何解决这个问题吗？最好的办法是修改我已经编写的代码。

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