在列表的开始/结尾禁用下一个/上一个 [英] disable next/prev at the start/end of the list

问题描述

我希望能够在第一个方框中隐藏/禁用上一个链接，而在最后一个方框中禁用下一个链接，因为目前您可以继续单击最后一个方框中的下一个，并且在执行此操作时它会因为单击上一个"而不再起作用. 查看小提琴中的演示

I want to be able to hide/disable the prev link when I am at the first box and disable the next link at the last box because at the moment you can keep clicking on next at the last box and when you do this it breaks as clicking previous no longer works. 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");
});

推荐答案

我会这样做:

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

这篇关于在列表的开始/结尾禁用下一个/上一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！