我正在开一家电子商店,我希望在每个页面上显示 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);
});
如您所见,它们是动态生成的,因此我应该能够将所需的行为应用于未指定数量的按钮。
最佳答案
我向您推荐这个 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,您将看到正确的项目。
关于javascript - 如何使用 js/jquery 显示一系列具有相同类的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23857232/