上一个下一个按钮隐藏在分页中？

Question

我在我们的项目中使用自定义 JavaScript 分页，但现在我需要知道如何隐藏 next 或 prev 按钮使用 JavaScript 或 jQuery。

如果我点击最后一个数字然后隐藏下一个按钮否则显示它。
如果我点击 1 个数字然后隐藏 perv 按钮，否则显示它。

我的代码如下：

$(document).ready(function(){
      
    $("#pageNavPosition > span").on("click", function(){
       var thisBtn = $(this);
        $("#pageNavPosition > span").removeClass('active');
        thisBtn.addClass('active');
         var btnLg = $("#pageNavPosition > span").length;
    });
    
});

#pageNavPosition >span{
    
    border:solid 1px red;
    padding:3px 5px;
    float:left;
    margin:2px;
    cursor:pointer;
}
.active{
    
    background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="pageNavPosition" style="display: block;">
    <span>  Prev </span>  
    <span>1</span>  
    <span>2</span>
    <span >3</span>  
    <span> Next </span></div>

Answer 1

试试这个：

$(document).ready(function(){
      var n = $("#pageNavPosition > span").size();
    $("#pageNavPosition > span").on("click", function(){
       var thisBtn = $(this);
        $("#pageNavPosition > span").removeClass('active');
        thisBtn.addClass('active');
        if(thisBtn.index() == (n-2))
        {
            $("#last").hide();
            $("#first").show();
        }
        else if(thisBtn.index() == 1)
        {
            $("#first").hide();
            $("#last").show();
        }
        else
        {
             $("#first").show();
             $("#last").show();
        }
        
    });
    
});

#pageNavPosition >span{
    
    border:solid 1px red;
    padding:3px 5px;
    float:left;
    margin:2px;
    cursor:pointer;
}
.active{
    
    background:#ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="pageNavPosition" style="display: block;">
    <span  id="first">  Prev </span>  
    <span>1</span>  
    <span>2</span>
    <span >3</span>  
    <span id="last"> Next </span></div>

Answer 2

将页码 class 添加到所有编号元素，如

<span class="page-number">1</span>

然后使用 jQuery

$("#pageNavPosition > span.page-number").first().on("click", function(){
  $(this).prev().hide();
});

$("#pageNavPosition > span.page-number").last().on("click", function(){
  $(this).next().hide();
});

PS : 需要单独处理show。

上一个下一个按钮隐藏在分页中？

Prev next button hide in pagination?

javascript

jquery

pagination