在列表的开始/结束禁用下一/上一页(disable next/prev at the start/e

我希望能够隐藏/禁用上一个链接时，我在第一个框，并禁止在最后一箱的下一个环节，因为你可以继续点击下一步按钮在最后一箱，当你做到这一点作为突破的那一刻点击以前不再起作用。 看到小提琴演示

<span id="wrapper">
<span id="prev"><a href="#">Go to Prev</a></span>
<span id="content">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div id="start" class="box">6</div>
    <div class="box">7</div>
</span>
<span id="next"><a href="#">Go to Next</a></span>

    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();
});

文章来源: disable next/prev at the start/end of the list