javascript - 如何使用 js/jquery 显示一系列具有相同类的元素？

Question

我正在开一家电子商店，我希望在每个页面上显示 12 种产品。在产品下，我创建了动态页面计数器(具有相应数字的 div)。期望的行为是:当单击带有“1”的框时，您将获得具有相同类别的前 12 个项目，当单击“2”时，将获得接下来的 12 个具有相同类别的项目，依此类推。

给定这个结构:

<div id="products">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
</div>

我应该如何使用js或jquery来显示相应的12个产品？

编辑:这是根据产品数量插入带有“1”、“2”、“3”的按钮的方式:

numItems = $('.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);
});

如您所见，它们是动态生成的，因此我应该能够将所需的行为应用于未指定数量的按钮。

Answer 1

我向您推荐这个 jquery 扩展 link

工作示例 here使用您的代码(items_per_page 属性设置为 12 是要求的)

$(document).ready(function(){
    $('#page_container').pajinate({items_per_page:12});
});

<div id="page_container">
    <div class="page_navigation"></div>     

  <div id="products" class="content">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>           
</div>

如果没有扩展名，您可以执行与此 example 中看到的相同的操作

function showItems(i){
    $("#products .item").css("display","none");
    $("#products .item").slice(i*12,i*12 + 12 ).css("display","block");
}
$(document).ready(function(){
    var breadCrumbs= Math.ceil($("#products .item").length/12) ;
    for(var i=0; i<breadCrumbs; i++){
        $("#breadcrumbContainer").append("<div data-item='" + i + "'>go to "+ i + "</div>");
    }

     $('#breadcrumbContainer div').click(function() {
            var value = $(this).attr("data-item");
           showItems(value);
            return false;
        });
});

html

<div id="products">
    <div id="breadcrumbContainer"></div>
    <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
  <div class="item">item 9</div>
  <div class="item">item 10</div>
  <div class="item">item 11</div>
  <div class="item">item 12</div>
  <div class="item">item 13</div>
  <div class="item">item 14</div>
  <div class="item">item 15</div>
  <div class="item">item 16</div>
  <div class="item">item 17</div>
  <div class="item">item 18</div>
  <div class="item">item 19</div>
  <div class="item">item 20</div>
  <div class="item">item 21</div>
  <div class="item">item 22</div>
  <div class="item">item 23</div>
  <div class="item">item 24</div>
  <div class="item">item 25</div>
  <div class="item">item 26</div>
</div>

CSS

.item{background-color:green;width:100px;}

如果您单击内容以“go to”开头的 div，您将看到正确的项目。