javascript 如何让我的“上一个”和“下一个”按钮在分页上工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31482739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to get my "prev" and "next" button work on pagination?
提问by Dreams
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
$pageItem.removeClass("active");
$(this).addClass("active");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>Now, I am using bootstrap pagination and add some customise feature using jQuery to make page "active" when I click on it which mean current page.
现在，我正在使用引导程序分页并使用 jQuery 添加一些自定义功能，以便在我单击它时使页面“处于活动状态”，这意味着当前页面。
However, the "prev" and "next" button will be also "active". What can I do to only switch page "active" when click on "prev" or "next" button and not to add "active" to "prev" and "next" button.
但是，“上一个”和“下一个”按钮也将处于“活动状态”。我该怎么做才能在单击“上一个”或“下一个”按钮时只切换页面“活动”而不将“活动”添加到“上一个”和“下一个”按钮。
回答by Manoj Kumar
Add a class to the previous and next buttons i.e. list items in your case and use .not()to exclude them.
为上一个和下一个按钮添加一个类，即在您的案例中列出项目并用于.not()排除它们。
$(document).ready(function() {
var pageItem = $(".pagination li").not(".prev,.next");
var prev = $(".pagination li.prev");
var next = $(".pagination li.next");
pageItem.click(function() {
pageItem.removeClass("active");
$(this).not(".prev,.next").addClass("active");
});
next.click(function() {
$('li.active').removeClass('active').next().addClass('active');
});
prev.click(function() {
$('li.active').removeClass('active').prev().addClass('active');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
<ul class="pagination">
<li class="prev">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li class="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>回答by Bhavin Solanki
You just need to add simply if condition for Nextand Prevbuttons
您只需要为Next和Prev按钮添加简单的 if 条件
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
console.log($(this).html().indexOf('Next'));
if($(this).html().indexOf('Next') <= -1 && $(this).html().indexOf('Previous') <= -1){
$pageItem.removeClass("active");
$(this).addClass("active");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>回答by Mostafa abobakr
This code will redirect to next and previous urlstest it with actual links in your project.
此代码将重定向到下一个和上一个 url ，使用项目中的实际链接对其进行测试。
$(document).on('click', '.prev', function () {
//1- get first element to check if it has class 'active',
// to prevent class 'active' from moving to prev button on click,
// if explanation isn't clear try removing if(){} to see it.
const first = $(this).siblings().first();
if (!first.hasClass('active')) {
//2- search <li>'s to get the one that has 'active' class.
const active = $(this).siblings('.active');
//3- get the previous item of the <li class"active"> to move to.
const prevItem = active.prev();
//4- get href of the item to redirect to.
const link = prevItem.children('a').prop('href');
//5- remove 'active' class from the current <li> and give it to prev <li>.
active.removeClass('active');
prevItem.addClass('active');
//6- redirect to href of the new <li>.
window.location.href = link;
}
});
$(document).on('click', '.next', function () {
const last = $(this).siblings().last();
if (!last.hasClass('active')) {
const active = $(this).siblings('.active');
const nextItem = active.next();
const link = nextItem.children('a').prop('href');
active.removeClass('active');
nextItem.addClass('active');
window.location.href = link;
}
}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="d-flex justify-content-center">
<ul class="pagination pagination-lg">
<li class="page-item prev">
<a class="page-link">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item next">
<a class="page-link">Next</a>
</li>
</ul>
</nav>