javascript - 使用 slider 为过滤添加分页，并在加载时显示过滤后的内容

Question

我正在尝试将代码更改为以下要求。

1. 将“上一页”和“下一页”按钮更改为分页(例如 1 2 3 4 等)

2. 显示“类别 1”内容而不是显示所有内容。显示过滤后的内容 onload 如下所示。我这样做了，但不确定它是否足够好。

   

其实我对jQuery和javaScript还是不太熟悉。过去几周我一直试图找出以下代码，但失败了。希望你们中的一些人能给我一些建议。谢谢!

//Show filtred image onload
$(document).ready(function(){
   $('div.filter a:first-child').trigger('click');
});

var visible = "";

$('div.filter').delegate('a', 'click', function (event) {
  visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
    pagination();
  event.preventDefault();
});


var itemsNumber = 8;
var min = 0;
var max = itemsNumber;

function pagination(action) {

    var totalItems = $("li" + visible).length;
    
    if (max < totalItems) {//Stop action if max reaches more than total items 
        if (action == "next") {

            min = min + itemsNumber;
            max = max + itemsNumber;

        }
    }

    if (min > 0) {//Stop action if min reaches less than 0
        if (action == "prev") {

            min = min - itemsNumber;
            max = max - itemsNumber;

        }
    }

    $("li").hide();
    $("li" + visible).slice(min, max).show();

}

pagination();


//Next
$("#next").click(function() {

    action = "next";
    pagination(action);

})

//Previous
$("#prev").click(function() {
    action = "prev";
    pagination(action);

})

#item-wrapper {
 width:250px;   
 margin:30px 0 0 30px;
}
.items li {
 font-family:arial;
font-size:13px;
 background-color:#ccc;
margin-bottom:1px; 
padding:5px;    
}
.ctrl-nav {
    background-color:#999;
    padding:5px;
    overflow:hidden;
}
.ctrl-nav a {
    font-family:arial;
font-size:13px;
    padding:5px 10px;
    color:#fff;
}
.ctrl-nav a#prev{
 float:left;   
}
.ctrl-nav a#next{
 float:right;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-1">item 3</li>
    <li class="category-1">item 4</li>
    <li class="category-1">item 5</li>
    <li class="category-1">item 6</li>
    <li class="category-2">item 7</li>
    <li class="category-2">item 8</li>
    <li class="category-2">item 9</li>
    <li class="category-2">item 10</li>
    <li class="category-2">item 11</li>
    <li class="category-2">item 12</li>
    <li class="category-1">item 13</li>
    <li class="category-1">item 14</li>
    <li class="category-2">item 15</li>
</ul>

<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>

Answer 1

这是我的方法...

CSS:

div.ctrl-nav a {
  padding: 5px;
  margin-right: 2px;
  color: white;
  background: black;
}

div.ctrl-nav a.selected {
  background: red;
}

JQUERY:

var selCatId = null;
var pageLength = 3;

// Filters.
$('div.filter').on('click','a',function(e) {

    e.preventDefault();

    // Get the category id from the href attribute.
    selCatId = $(this).attr('href').substring(1);

    // Create pagination.
    var nPages = Math.ceil($('div#item-wrapper ul.items li.'+selCatId).length / pageLength),
        pages = [];

    // Create and show page numbers.
    for (var i=1; i<=nPages; i++)
        pages.push('<a href="#">'+i+'</a>');
    $('div.ctrl-nav').html(pages.join(''));

    // Activate page number selection.
    $('div.ctrl-nav a').click(function(e) {

        e.preventDefault();

        var pageInit = (parseInt($(this).text())-1)*pageLength;

        $('div#item-wrapper ul.items li').hide()
                                         .filter('.'+selCatId)
                                         .slice(pageInit,pageInit+pageLength)
                                         .show();

        // Mark the active page.
        $('div.ctrl-nav a').removeClass('selected').filter(this).addClass('selected');
    });

    // Show first page of the selected category.
    $('div.ctrl-nav a:first').trigger('click');
});

// Show 'Category 1' when page loads.
$('div.filter a:first').trigger('click');

...和一个工作文件... https://fiddle.jshell.net/rigobauer/zpdk9e6q/

注意:当您选择新类别时，它将转到该类别的首页。

希望对你有帮助