Question

您好我需要在以下脚本中禁用上一个和下一个锚点，如果它分别显示第一个和最后一个div。这是fiddle。我有几个锚点，在点击时显示相应的div。我还有上一个和下一个锚点，当点击时分别转到下一个和前一个div。

我希望禁用“Prev”以防它显示第一个div即div0并禁用“Next”以防它显示最后一个div即div4。如果代码在某个地方被破坏，请告诉我。感谢

    <a class="prev">prev</a>  &nbsp;
    <a class="next">next</a>
    <a class="anc" id="an0">A1</a>
    <a class="anc" id="an1">A2</a>
    <a class="anc" id="an2">A3</a>
    <a class="anc" id="an3">A4</a>
    <a class="anc" id="an4">A5</a>



    <div class="zdivs">
            <div id="q0" class="hidepiece">
                Lorem ipsum dolor sit amet
            </div>
            <div id="q1" class="hidepiece">
                 consectetuer adipiscing elit
            </div>
            <div id="q2" class="hidepiece">
                sed diam nonummy nibh euismod tincidunt 
            </div>
            <div id="q3" class="hidepiece">
                laoreet dolore magna aliquam erat volutpat
            </div>
            <div id="q4" class="hidepiece">
                Ut wisi enim ad minim veniam
            </div>
    </div>

这是jQuery用于隐藏所有具有类名称“hidepiece”的div并在点击锚点上逐一显示它们

<!--One by one navigation class anc hidepiece-->
<script>
$(document).ready(function() {
$("div.hidepiece").hide();
$("a.anc").click(function() {
    var id = $(this).attr("id");
    var divId = id.replace("an", "q");
    $("div.hidepiece").hide();
    $("div#" + divId).fadeIn("slow");
    $("#zdivs").scrollTop(0);//scrolls zdiv to top
  });
});
</script>

<!--previous next class zdivs-->
<script>
$(document).ready(function(){
$(".zdivs div").each(function(e) {
    if (e != 0)
        $(this).hide();
});

$(".next").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").next().length != 0)
        $(".zdivs div:visible").next().fadeIn("slow").prev().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:first").fadeIn("slow");
    }
    return false;
});

$(".prev").click(function(){
  $("#zdivs").scrollTop(0);
    if ($(".zdivs div:visible").prev().length != 0)
        $(".zdivs div:visible").prev().fadeIn("slow").next().hide();
    else {
        $(".zdivs div:visible").hide();
        $(".zdivs div:last").fadeIn("slow");
    }
    return false;
  });
});
</script>

Answer 1

的 LIVE DEMO 的

实际上这就是你所需要的：

$(function(){ // DOM is now read and ready to be manipulated var $zDiv = $('.zdivs > div'), $prNx = $('.prev, .next'), $btns = $('.zanc > a'), n = $zDiv.length, c = 0; // current function toggView(){ // content: $zDiv.hide().eq(c).show(); // buttons: $prNx.show(); if(c<=0 ){ $('.prev').hide(); } if(c>=n-1){ $('.next').hide(); } } toggView(); $prNx.click(function(){ c = $(this).hasClass('next') ? ++c : --c; toggView(); }); $btns.click(function( e ){ c = $(this).index(); toggView(); }); });

拥有超简化且更具可读性的 HTML ：

<a class="prev">Prev</a>   <a class="next">Next</a> <div class="zanc"> <a>A1</a> <a>A2</a> <a>A3</a> <a>A4</a> <a>A5</a> </div> <div class="zdivs"> <div>1 Lorem ipsum dolor sit amet</div> <div>2 consectetuer adipiscing elit</div> <div>3 sed diam nonummy nibh euismod tincidunt</div> <div>4 laoreet dolore magna aliquam erat volutpat</div> <div>5 Ut wisi enim ad minim veniam</div> </div>

Answer 2

检查Div-q0和Div q4的可见性。

if (!$("").css('visibility') === 'hidden') { }

根据返回值启用和禁用next和prev按钮

在jQuery中禁用Previous Next按钮

2 个答案: