function Save() {
var par = $(this).parent().parent(); //tr
var tdDate = par.children("td:nth-child(1)");
var tdTime = par.children("td:nth-child(2)");
var tdTreatmentNum = par.children("td:nth-child(3)");
var tdCellNum = par.children("td:nth-child(4)");
var tdWasteContNum = par.children("td:nth-child(5)");
var tdButtons = par.children("td:nth-child(6)");
tdDate.html(tdDate.children("input[type=date]").val());
tdTime.html(tdTime.children("input[type=time]").val());
tdTreatmentNum.html(tdTreatmentNum.children('select').val());
tdCellNum.html(tdCellNum.children('select').val());
tdWasteContNum.html(tdWasteContNum.children('select').val());
tdButtons.html("<img src='trash.png' class='btnDelete'/>
<img src='pencil.png' class='btnEdit'/><img src='up.png'class='btnUp'/>");
$(".btnEdit").bind("click", Edit);
$(".btnDelete").bind("click", Delete);
$(".btnUp").bind("click", Up);
};
function Up() {
var row = $(this).parent().parent(); //tr
if ($(this).hasClass('up'))
row.prev().before(row);
else
row.next().after(row);
});
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
$pageItem.removeClass("active");
$(this).addClass("active");
});
});
现在，我正在使用bootstrap分页并使用jQuery添加一些自定义功能，以便在我点击它时显示页面“活动”，这意味着当前页面。
但是，“prev”和“next”按钮也将“有效”。 如果单击“上一步”或“下一步”按钮而不将“活动”添加到“上一步”和“下一步”按钮，我该怎么办才能切换页面“活动”。
答案 0 :(得分：3)
在上一个和下一个按钮中添加一个类，即在您的案例中列出项目，并使用.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>
答案 1 :(得分：0)
您只需添加下一步和上一页按钮的条件
$(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>
答案 2 :(得分：0)
此代码将重定向到下一个和上一个网址 使用项目中的实际链接对其进行测试。
$(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>