禁用列表开头/结尾的next / prev

我希望能够在第一个框时隐藏/禁用prev链接，并在最后一个框中禁用下一个链接，因为此时您可以在最后一个框中继续单击下一个，当您执行此操作时，它会中断点击上一个不再有效。 看小提琴演示

 Go to Prev  
1
 
2
 
3
 
4
 
5
 
6
 
7
  Go to Next 

  var $curr = $("#start"); $curr.css("display", "inline"); $("#prev a").click(function () { $curr = $curr.prev(); $(".box").css("display", ""); $curr.css("display", "inline"); }); $("#next a").click(function () { $curr = $curr.next(); $(".box").css("display", ""); $curr.css("display", "inline"); }); 

Answer 1

我会这样做：

http://jsfiddle.net/mBXYL/

 var $curr = $("#start"); $curr.css("display", "inline"); $("#prev a").click(function() { $curr = $curr.prev(); $(".box").css("display", ""); $curr.css("display", "inline"); $("#next").show(); if (!$curr.prev().length) { $("#prev").hide(); } }); $("#next a").click(function() { $curr = $curr.next(); $(".box").css("display", ""); $curr.css("display", "inline"); $("#prev").show(); if (!$curr.next().length) { $("#next").hide(); } });​ 

Answer 2

编辑以尊重您的项目需求：

jsFiddle演示（隐藏按钮）

 var currN = 5; var boxN = $('#content .box').length; $('#content .box').eq(currN).show(); function displayBox(){ pr= currN === 0 ? $('#prev').hide() : $('#prev').show() ; nx= currN === boxN-1 ? $('#next').hide() : $('#next').show() ; $('.box').eq(currN).show().siblings().hide(); } $("#prev, #next").click(function () { var whichBtn = this.id==='next' ? currN++ : currN--; displayBox(); }); 

---

你不需要禁用你的按钮， 循环！

jsFiddle演示

 var $curr = $("#start"); var currN = $curr.index(); var boxN = $('#content .box').length; $curr.css("display", "inline"); function displayBox(){ if(currN === -1){ currN = boxN-1; }else{ currN = currN % boxN; } $('.box').eq(currN).show().siblings().hide(); } $("#prev a").click(function () { currN--; displayBox(); }); $("#next a").click(function () { currN++; displayBox(); }); 

---

我在这里创建了一个简化版本（你不需要#start ）：

jsFiddle演示2（简化）

这就是你所需要的：

 var currN = 5; // set here start slide! (zero index based) var boxN = $('#content .box').length; $('#content .box').eq(currN).show(); function displayBox(){ var curBox = currN === -1 ? currN=boxN-1 : currN=currN%boxN; $('.box').eq(currN).show().siblings().hide(); } $("#prev, #next").click(function () { var whichBtn = this.id==='next' ? currN++ : currN-- displayBox(); });