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

Question

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

1. 如果我点击上一个号码然后隐藏下一个按钮，则显示它。
2. 如果我点击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

将page-number类添加到所有编号的元素，如

<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：你需要单独处理节目。