罗希特·阿扎德·马利克（Rohit Azad Malik）

我使用的是自定义JavaScript分页在我们的项目，但现在我需要知道如何隐藏下一个或上一个使用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>

Yogendra

尝试这个：

$(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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。