JQuery 内容箭头导航

Question

我在使用这段代码时遇到了麻烦： http://jsfiddle.net/xarlyblack/4wsx3zkx/

我想做一个jQueryfadeIn/Out内容导航。

当我转到下一个 div 然后再返回时它起作用了。但是当我在最后一个 div 并单击下一步时，内容消失了（为什么要创建一个 if 语句到 return 到第一个）。当我在第一个 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();
}

Here is your updated JSFiddle demo

JQuery 内容箭头导航

JQuery Content Arrow Navigation

html

javascript

jquery

slider