【发布时间】：2016-06-18 02:35:19
【问题描述】：
我创建了一个简单的 JavaScript-jQuery 分页，它工作正常，但下一个和上一个函数我不知道创建该函数来显示下一个和上一个项目。
假设我们有一个固定的容器，其中包含多个 div 项目，这些项目具有固定的高度和高度。容器有 33 项，但只会显示 10 项进行分页。
浏览器加载所有项目都添加了hideme类，因此所有项目都用display: none隐藏，然后jquery脚本将删除类hideme到前10个项目并创建分页按钮。对于我们的示例，我们有 33 个项目，因此我们创建了 4 个分页按钮，每个分页按钮在单击后会找到 10 个项目到接下来的 10 个项目（和剩余项目）。
到目前为止，我已经想出了下面的分页脚本：
HTML
<div id="container">
<ul class="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
<li>item 21</li>
<li>item 22</li>
<li>item 23</li>
<li>item 24</li>
<li>item 25</li>
<li>item 26</li>
<li>item 27</li>
<li>item 28</li>
<li>item 29</li>
<li>item 30</li>
<li>item 31</li>
<li>item 32</li>
<li>item 33</li>
</ul>
</div>
<div class="pagination_wrapper">
<div class="pagination">
<div class="previous button">Previous</div>
<!-- insert pagination buttons here -->
<div class="next button insertbeforer">Next</div>
</div>
</div>
JAVASCRIPT
$(document).ready(function() {
// count number of items
var count_items = $(".items li").length;
// divide items by 10
var separate_items = count_items / 10;
// create empty variable
var page_division = "";
// check separate_items if contains decimal if true add additional pagination
if (separate_items % 1 != 0) {
page_division = separate_items + 1;
console.log(page_division);
} else {
page_division = separate_items;
console.log(page_division);
}
// iterate then generate links for each items pagination
for (var items_pagination = 1; items_pagination < page_division; items_pagination++) {
$(".pagination .insertbeforer").before("<div class='button page" + items_pagination + "'>" + items_pagination + "</div>");
};
// hide all items
$('.items li').addClass('hideme');
// display first 10 items
$.each($('.items li'), function(index, value) {
if (index <= 9) {
$(this).toggleClass('hideme')
}
});
// display items from 1-10
$(".page1").click(function() {
$('.items li').addClass('hideme');
for (var item = 1; item < 11; item++) {
$(".items li:nth-of-type(" + item + ")").removeClass('hideme');
};
});
// display items from 11-20
$(".page2").click(function() {
$('.items li').addClass('hideme');
for (var item = 11; item < 21; item++) {
$(".items li:nth-of-type(" + item + ")").removeClass('hideme');
};
});
// display items from 21-30
$(".page3").click(function() {
$('.items li').addClass('hideme');
for (var item = 21; item < 31; item++) {
$(".items li:nth-of-type(" + item + ")").removeClass('hideme');
};
});
// display items from 31-33
$(".page4").click(function() {
$('.items li').addClass('hideme');
for (var item = 31; item < 41; item++) {
$(".items li:nth-of-type(" + item + ")").removeClass('hideme');
};
});
});
CSS
#container{width:420px;height:300px;display:block;overflow:hidden;border:1px solid gray}
.items{flex-direction:row;display:flex;flex-wrap:wrap}
.items li{list-style:none;display:block;width:60px;height:60px;background:red;margin:5px;color:#fff}
.pagination_wrapper{width:420px;height:30px;display:block;border:1px solid gray}
.pagination{margin-left:15%}
.pagination .button{background:transparent;color:#000;border:transparent;font-weight:700;margin-left:2px;border-radius:3px!important;padding:1px 10px;line-height:1.8em;border:1px solid #535353;display:inline;cursor:pointer}
.hideme{display:none!important;width:0;height:0}
在此处链接到工作 jsfiddle https://jsfiddle.net/jsbrianluna/wctnbbvq/17/
【问题讨论】：
-
为什么每次页面点击都有一个事件监听器？使其可在传递下一个页码的单个函数中重复使用。如果您将当前页码存储在变量中，您也可以将其用于下一个和上一个。单击下一个/上一个后，您只需降低它并使用该数字调用上述功能..
-
我也试过了。不适用于我的代码。
-
你能分享一下不起作用的代码吗？
-
如果点击分页按钮，我的代码只会跟踪 url 上的哈希值，将为链接添加哈希值，例如我点击了分页按钮 1，如果按钮 2，它将向当前链接“#1”添加哈希值点击的“#2”将被添加到 url。如果用户在当前带有哈希“#2”的 url 时单击下一步按钮，脚本会将哈希号更改为“#3”，但在触发按钮 3 分页时不起作用
-
有点快和肮脏，但它的工作原理..jsfiddle.net/1w1euu3z
标签： javascript html pagination