jquery - 禁用列表开头/结尾处的下一个/上一个

Question

我希望能够在第一个框中隐藏/禁用上一个链接，并在最后一个框中禁用下一个链接，因为此时您可以在最后一个框中继续单击下一个，并且当您执行此操作时它会中断，因为单击“上一个”不再起作用。 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();
});