Отключить предыдущие Следующие кнопки в jQuery

Question

Здравствуйте, мне нужно отключить предыдущий и следующий привязки в следующем скрипте, если он отображает первый и последний div соответственно. Вот для него fiddle. У меня есть несколько якорей, которые показывают соответствующий div при нажатии. У меня также есть предыдущие и следующие привязки, которые при нажатии идут к следующим и предыдущим divs соответственно.

Я ищу, чтобы отключить «Prev», если он показывает первый div ie div0 и отключить «Next», если он показывает последний div ie 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» и показать их по одному на щелкая якоря

<!--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> &nbsp; <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') { } 

Accoridng для возвращаемого значения включения и отключения следующих и Prev кнопок