jQuery內容箭頭導航

Question

我在使用此代碼時遇到了麻煩： http : //jsfiddle.net/xarlyblack/4wsx3zkx/

我想做一個jQuery fadeIn / Out內容導航。

當我轉到下一個div然后再次返回時，它可以工作。 但是，當我進入最后一個div並單擊下一步時，內容消失了（為什么創建了if語句以返回到第一個）。 當我進入第一個div並單擊上一個時，會發生相同的情況，就是我想轉到最后一個div。

我試圖與.last() / .first() .find()eq() 但是一切都會發生。 我想我缺少了一些東西。

jQuery代碼：

 var ilust = $('.ilust'); var wrapper = ilust.find('.pag-ilust'); var pag = wrapper.find('.pag'); var btn = ilust.find('.nav-btn'); btn.click(function(){ if ($(this).hasClass('nav-next')){ var currentPag = $('.active-pag'); var nextPag = currentPag.next(); currentPag.fadeOut('fast').removeClass('active-pag'); nextPag.fadeIn('slow').addClass('active-pag'); if (nextPag = false){ nextPag = pag.first(); } } else if ($(this).hasClass('nav-prev')){ currentPag = $('.active-pag'); prevPag = currentPag.prev(); currentPag.fadeOut('fast').removeClass('active-pag'); prevPag.fadeIn('slow').addClass('active-pag'); } }); 

Answer 1

您需要查看next / prev是否使用其長度返回了任何元素，還需要在嘗試獲取next / prev元素時立即進行操作，如果不存在它們，則需要分配默認值。

 var ilust = $('.ilust'); var wrapper = ilust.find('.pag-ilust'); var pag = wrapper.find('.pag'); var btn = ilust.find('.nav-btn'); btn.click(function() { if ($(this).hasClass('nav-next')) { var currentPag = $('.active-pag'); var nextPag = currentPag.next(); if (!nextPag.length) { nextPag = pag.first(); } currentPag.stop().fadeOut('fast').removeClass('active-pag'); nextPag.fadeIn('slow').addClass('active-pag'); } else if ($(this).hasClass('nav-prev')) { var currentPag = $('.active-pag'); var prevPag = currentPag.prev(); if (!prevPag.length) { prevPag = pag.last(); } currentPag.stop().fadeOut('fast').removeClass('active-pag'); prevPag.fadeIn('slow').addClass('active-pag'); } }); 

 .pag:nth-child(n+2) { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="ilust"> <div class="nav-cat"> <a href="#" class="nav-btn nav-prev">Prev</a> <a href="#" class="nav-btn nav-next">Next</a> </div> <div class="pag-ilust"> <div class="pag active-pag"> <p>Things 0</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 1</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 2</p> <p>Lot Things</p> </div> <div class="pag"> <p>Things 3</p> <p>Lot Things</p> </div> </div> 

Answer 2

更簡化的版本

$('.nav-btn').on('click',function(){
    var next=$('.active-pag').next(); //get active page's next element
    var prev=$('.active-pag').prev(); //get active page's prev element
    $('.active-pag').fadeOut('fast').removeClass('active-pag'); //fadeOut active div
    if($(this).hasClass('nav-prev')){ //check whether clicked button is prev or next
        if(prev.length!=0) //check if previous element is present
        {
            prev.fadeIn('slow').addClass('active-pag'); //if yes fade that in
        }
        else
            $('.pag:last').fadeIn('slow').addClass('active-pag'); //fade last element in
    }
    else
    {
        if(next.length!=0) //checking for next element
        {
            next.fadeIn('slow').addClass('active-pag'); //if present fadeIn next element
        }
        else
            $('.pag:first').fadeIn('slow').addClass('active-pag');//if not fade in first element
    }
});

DEMO

Answer 3

替換為： var nextPag = currentPag.next();

這樣：

var nextPag;
if(currentPag.next().length>0){
      nextPag = currentPag.next();
}else{
      nextPag = $(".pag").first();
}

這是： var prevPag = currentPag.prev();

這樣：

var prevPag;
if(currentPag.prev().length>0){
       prevPag = currentPag.prev();
}else{
       prevPag = $(".pag").last();
}

這是您更新的JSFiddle演示