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

Question

我希望能够在第一个框中隐藏/禁用prev链接，并在最后一个框中禁用下一个链接，因为此时您可以在最后一个框中继续单击下一个链接，当您执行此操作时点击之前不再有效，它会中断。 see demo in fiddle

<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

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

jsFiddle demo (hides buttons)

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 demo

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 demo 2 (simplified)

这就是你所需要的：

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

Answer 2

我会这样做：

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