jquery - jQuery 中巧妙的下一个和上一个按钮

Question

我创建了一个网页，当您按“向下”时，它会自动向下滚动到下一个 ID(由于溢出而看不到的部分:隐藏)，当您按“向上”时，它会向上滚动。

目前，每个箭头只是告诉网页转到特定的 div，例如“向下箭头”表示

<a class="tab" href="#page">Down</a>

这对于只有两页来说是可以的，但是因为我将有更多页面，我希望能够指定页面数量并让箭头自动更改它需要转到下一个链接的链接。

例如，在第 1 页上，“向上箭头”不可见，当您按“向下箭头”时，它会滚动到 #page2，然后“向上箭头”可见。如果您现在再次按向下箭头，它将带您到#page3，然后它会被隐藏，因为第 3 页是最后一页。

我猜我需要创建一个“var”来指定页面数量，并且为了使箭头不可见，它将把 css 属性“display”更改为“none”，但我不知道如何执行此操作，也不知道如何执行此操作让链接确定下一个要转到哪个数字!

编辑V2: (这是当前代码，它已实现了您的答案的帮助。我已部分成功地使用此代码使箭头出现和消失)

var PN = 1;
var PA = $('.page').length;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}

$(document).ready(function(){
    checkArrows();
        $('.arrow').click(function(){
         var chk_arr =  $(this).hasClass('down_arrow') ? PN++ : PN--;
          checkArrows();
    });
});

出于某种原因 var PA = $('.page').length; 似乎没有返回任何值，即使我在 HTML 文件中出现了 2 次。

就滚动而言，这是代码片段

$('#down_arrow').click(function () {

        $('a.arrow').removeClass('selected');
        $(this).addClass('selected');

        current = $(this);

        $('#wrapper').scrollTo($(this).attr("href"), 1000);     

        return false;
    });

现在我正在尝试找到一种方法来使用 PN + 1 或其他内容更新“href”，以便 href#page 变为 #page2

一如既往，非常感谢!

Answer 1

jsBin DEMO

var PN = 1;
var PA = $('.box').length;
var Pos = 0;

function checkArrows() {
    if(PN === 1) {
       $("#up_arrow").css({ "display": "none"});
    }else{
       $("#up_arrow").css({ "display": "block"});
    }
    if(PN === PA) {
      $("#down_arrow").css({"display": "none"});
    }else{
       $("#down_arrow").css({"display": "block"});
    }
}
checkArrows();

function goTo(){
   checkArrows();
   Pos = $('.box').eq(PN-1).position().top;
  $('#scroller').stop().animate({top: '-'+Pos},1200);
}
goTo();


$('#up_arrow').click(function(){
      PN--;
      goTo();
});
$('#down_arrow').click(function(){
      PN++;
      goTo();
});

HTML(简化):

  <div id="nav">
    <button id="up_arrow">UP</button><button id="down_arrow">DOWN</button>
  </div>
    
  <div id="container">
  <div id="scroller">
    
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

  </div>
  </div>

CSS:

  #container{
    position:relative;
    background:#eee;
    width:300px;
    height:400px;
    overflow:hidden; 
  }
  
  .box{
    position:relative;
    color:#fff;
    background:#444;
    padding:20px;
    margin-bottom:10px;
  
  }
  
  #nav{
    position:fixed;
    left:320px;
    width:200px;
  }
  
  #scroller{
    position:absolute;
    top:0px;
  }
  button{
    cursor:pointer;
  }

---

HERE 是一个很好的演示，不会隐藏箭头!一探究竟! ;)

还有另一个 demo 使用scrollTop 并减少 1 个 HTML 元素