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演示