单击下一个/上一个按钮后的分页脚本样式当前页码

Question

我正在编写分页脚本（代码如下）；而且我不知道在单击下一个上一个按钮后如何选择当前的分页数（我在下面的缺失位上添加了注释：removeClass('current'); 和 addClass('current') to active pagination number;）。样式应该和直接点击页码$("#pagin li a").click(function()...一样工作

这是一张图片：

pagination style when current page selected

提前感谢您的帮助！

pageSize = 4;
incremSlide = 5;
startPage = 0;
numberPage = 0;

var pageCount =  $(".browsethearchive-items").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
    
for(var i = 0 ; i<pageCount;i++){
    $("#pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
    if(i>pageSize){
       $("#pagin li").eq(i).hide();
    }
}

var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
   startPage-=1;
   incremSlide-=1;
   numberPage--;
   slide();
});

prev.hide();

var next = $("<li/>").addClass("next").html("Next").click(function(){
   startPage+=1;
   incremSlide+=1;
   numberPage++;
   slide();
});


$("#pagin").prepend(prev).append(next);

$("#pagin li").first().find("a").addClass("current");

slide = function(sens){
   $("#pagin li").hide();
   
   for(t=startPage;t<incremSlide;t++){
     $("#pagin li").eq(t+1).show();
   }
   if(startPage == 0){
     next.show();
     prev.hide();
   }else if(numberPage == totalSlidepPage ){
     next.hide();
     prev.show();
   }else{
     next.show();
     prev.show();
   }
   
    
}

showPage = function(page) {
      $(".browsethearchive-items").hide();
      $(".browsethearchive-items").each(function(n) {
          if (n >= pageSize * (page - 1) && n < pageSize * page)
              $(this).show();
      });        
}
    
showPage(1);
$("#pagin li a").eq(0).addClass("current");


var $listItems = $('#pagin li a');
var activeLink;


$("#pagin li a").click(function() {

    $listItems.removeClass('current');
    $(this).addClass('current');  
    var activeLink=$(this);

    showPage(parseInt($(this).text()));
});


var i = 1;

$(".prev").click(function() {

    // removeClass('current');
    // addClass('current') to active pagination number; 

    if (i != 1) {
      showPage(--i);
    }
});
$(".next").click(function() {

    // removeClass('current');
    // addClass('current') to active pagination number; 


    if (i < ($('.browsethearchive-items').length)/4) {
      showPage(++i);
    }    
});

更新这里是对工作代码的修改——>https://jsfiddle.net/JoChicau/em19ku8v/39/——>感谢@biberman！

Answer 1

您可以通过这种方式选择类为“current”的列表元素：

$("#pagin li a.current")

要将“当前”类设置为下一个或上一个列表元素，您可以使用 jQuery 方法 next() 和 prev()。由于您将类设置为列表元素内的锚点，因此您首先必须使用 parent() 函数选择锚点的父级以获取列表元素本身，然后在使用 next() 或 prev() 后选择新的锚点使用find("a") 列出元素。

工作示例：

$(".prev").click(function() {
  let prevLi = $("#pagin li a.current").parent().prev().find("a");
  if (prevLi[0]) {
    $("#pagin li a.current").removeClass("current");
    prevLi.addClass("current");
  }
});

$(".next").click(function() {
  let nextLi = $("#pagin li a.current").parent().next().find("a");
  if (nextLi[0]) {
    $("#pagin li a.current").removeClass("current");
    nextLi.addClass("current");
  }
});

ul {
  list-style: none;
}

li {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
}

li:not(.next, .prev) {
  background-color: grey;
}

li a.current {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="pagin">
    <li class="prev"><</li>
    <li><a class="current">1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li class="next">></li>
</ul>

---

此外，我建议直接在 li 标记中添加和删除类，因为它使脚本更容易一些（例如不需要 parent() 和 find("a")）。

工作示例：

$(".prev").click(function() {
    let prevLi = $("#pagin li.current").prev();
    if (prevLi.find('a')[0]) {
        $("#pagin li.current").removeClass("current");
        prevLi.addClass("current");
    }
});

$(".next").click(function() {
    let nextLi = $("#pagin li.current").next();
    if (nextLi.find('a')[0]) {
        $("#pagin li.current").removeClass("current");
        nextLi.addClass("current");  
    }
});

ul {
    list-style: none;
}

li {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
}

li:not(.next, .prev) {
    background-color: grey;
}

li.current {
    background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="pagin">
    <li class="prev"><</li>
    <li class="current"><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li class="next">></li>
</ul>