Question

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

我想做一个jQuery淡入/淡出内容导航。

当我去下一个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元素时立即执行它，如果它们不存在则需要指定默认值

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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内容箭头导航

3 个答案: