使上一個/下一個按鈕消失

Question

我輸入了一些內容的快速jQuery滑塊框。 現在，我只有3個面板或頁面，單擊“上一個”或“下一個”時，它們會循環顯示。 我現在遇到的唯一麻煩是讓它在結束時禁用按鈕。 當前，您可以繼續單擊“下一步”，並且容器將繼續向左或向右移動。

我將如何實現這一目標？ 我曾考慮過要在第一個/最后一個幻燈片中添加一個類，並告訴它是否具有此類來隱藏鏈接？ 但這可能不是最友好的方式。 我想我要檢查一下是否還有另一個子div，如果沒有，則禁用該按鈕。 這樣，如果將來我想添加更多面板，jQuery就會知道何時禁用該按鈕。

這是我目前擁有的： http : //codepen.io/anon/full/xdilq

任何幫助將不勝感激！

Answer 1

jsBin演示

pagesN = $('.pages').length;
var c = 0;

function anim(){
  c = c===-1 ? pagesN-1 : c%pagesN;
  $('.pageContainer').stop().animate({left: -422*c }); 
}


$('.previous, .next').click(function(){
  var myClass = $(this).hasClass('next') ? ++c : --c;
  anim();
});

點擊增加或減少var c 。 除了動畫外，由於模運算符，三元運算符可防止c變為-1 （prev）並將其始終保持在最大范圍內（next）：

c = c===-1 ? pagesN-1 : c%pagesN;

Answer 2

動畫完成后將變量加1或相應減少會怎樣？ 當此變量位於第3步時，您將隱藏按鈕，否則將其顯示出來。 就像是

var counter = 1;
$('.next').click(function() {
  $('.pageContainer').animate({
    "left": "-=422px"
  }, 1000, function() {
    counter++;
    if(counter >= 3){ // or panels.length
      // hide button "next"
    }
  });
});