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

如果您点击内容以“转到”开头的div，您会看到正确的项目。

Answer 2

更多＆＃34;蛮力＆＃34;，不那么优雅的方法 - FIDDLE。

JS

var itemsperpage = 5;
var pagenumber = 1;
var firstelement = 0;
var divid;

$('.holder div').on('click', function() {
    $('.holder2 div').hide();
    pagenumber = this.id.slice(-1);
    firstelement = ((pagenumber-1) * itemsperpage) + 1; 
    lastelement = (firstelement + itemsperpage);
    for(var n=firstelement; n<lastelement; n++)
       {
           $(".item:nth-child(" + n + ")").show();
        } 
});

Answer 3

在这个Fiddle中有一个解决你的问题的方法，而不使用外部插件只有jQuery代码。
通过单击按钮i div.items显示动态evry 12 div项目添加按钮您需要的所有jquery代码是：

<script type="text/javascript">
$(document).ready(function(){
    var arr=[]
    for(i=0;i<$('.item').length;i+=12){
        arr.push(i)
        }
    arr.push($('.item').length)
    for(i=0;i<(arr.length-1);i++){
        $('<input name="" type="button" class="button" id="'+arr[i]+','+arr[i+1]+'" value="'+(arr[i]+1)+','+arr[i+1]+'">').appendTo('body')
        }
    $('.button').click(function(){
        $('div.item').hide()
        var divs=$('.item')
        var range=$(this).attr('id').split(',')
        divs.slice(range[0],range[1]).css({'display':'block'})
        })
})
</script>

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

3 个答案: