使用 next/prev 按钮时幻灯片的分页无法正常工作

Question

我正在尝试使用 jquery 做一个非常简单的幻灯片放映，但我的分页不能正常使用我编写的代码，我真的不明白为什么。这是我的幻灯片的代码笔 link：http://codepen.io/anon/pen/xVyZxP 红色圆圈代表上一个箭头，黄色圆圈代表下一个箭头。

有人可以帮助我吗？

$(document).ready(function() {

    // ARROW PREVIOUS

    $('.who-dots .previous').click(function(){

        var currentSlide = $('.who-global .active-slide');
        var previousSlide = currentSlide.prev();  

        if (previousSlide.length == 0) {
            previousSlide = $('.who-global .who').last();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        previousSlide.fadeIn(600).addClass('active-slide');

        var currentDot = $('.who-dots .active-dot');
        var previousDot = currentDot.prev();

        if (previousDot = $('.who-dots .previous')) {
            previousDot = $('.who-dots li').eq(3);
        }

        currentDot.removeClass('active-dot');
        previousDot.addClass('active-dot');

    });

    // ARROW NEXT

    $('.who-dots .next').click(function(){
        var currentSlide = $('.who-global .active-slide');
        var nextSlide = currentSlide.next();

        if (nextSlide.length == 0 ) {
            nextSlide = $('.who-global .who').first();
        }

        currentSlide.fadeOut(600).removeClass('active-slide');
        nextSlide.fadeIn(600).addClass('active-slide');

        var currentDot = $('.who-dots .active-dot');
        var nextDot = currentDot.next();

        if (nextDot = $('.who-dots .next')) {
            nextDot = $('.who-dots li').eq(1);
        }

        currentDot.removeClass('active-dot');
        nextDot.addClass('active-dot');

    });
});

Answer 1

问题是当您检查 previous/next 点是上一个还是下一个按钮时。

if (previousDot = $('.who-dots .previous')) {
  previousDot = $('.who-dots li').eq(3);
}

在你的第一行你只有一个 = 所以你在做一个赋值而不是一个比较。

将其更改为 == 仍然无效，因为 jQuery 对象不一样。

if (nextDot == $('.who-dots .next')) {
  nextDot = $('.who-dots li').eq(1);
}

这是nextDot：

[li.next, prevObject: n.fn.init[1], context: document]

这是$('.who-dots .next')：

[li.next, prevObject: n.fn.init[1], context: document, selector: ".who-dots .next"]

如您所见，$('.who-dots .next') 有一个额外的属性称为 "selector"，因此对象不相等。

你可以做的是使用 .is() which "allows you to test the contents of a jQuery object without modification".

if (nextDot.is($(".who-dots .next"))) 
  nextDot = $('.who-dots li').eq(1);
}

或者您应该考虑将 .next 和 .previous 更改为 id 而不是类。您将只有 1 个上一个和 1 个下一个按钮，因此 id 更适合。然后你可以检查是否 nextDot.attr("id") === "next".

$(document).ready(function() {

  $('.who-dots .previous').click(function() {

    var activeSlide = $('.who-global .active-slide');
    var previousSlide = activeSlide.prev();

    if (previousSlide.length == 0) {
      previousSlide = $('.who-global .who').last();
    }

    activeSlide.fadeOut(600).removeClass('active-slide');
    previousSlide.fadeIn(600).addClass('active-slide');

    var activeDot = $('.who-dots .active-dot');
    var previousDot = activeDot.prev();

    if (previousDot.is($(".who-dots .previous"))) {
      previousDot = $('.who-dots li').eq(3);
    }

    activeDot.removeClass('active-dot');
    previousDot.addClass('active-dot');
  });

  // ARROW NEXT

  $('.who-dots .next').click(function() {
    var activeSlide = $('.who-global .active-slide');
    var nextSlide = activeSlide.next();

    if (nextSlide.length == 0) {
      nextSlide = $('.who-global .who').first();
    }

    activeSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');

    var activeDot = $('.who-dots .active-dot');
    var nextDot = activeDot.next();

    if (nextDot.is($(".who-dots .next"))) {
      nextDot = $('.who-dots li').eq(1);
    }

    activeDot.removeClass('active-dot');
    nextDot.addClass('active-dot');
  });
});

.who-global {
  margin: 0 25px;
  height: 320px;
  overflow: hidden;
}
.who-global .who {
  display: none;
}
.who-global .who img {
  display: block;
}
.who-global .who > ul {
  overflow: hidden;
}
.who-global .active-slide {
  display: block;
}
.who-dots {
  text-align: center;
}
.who-dots li {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid black;
  border-radius: 10px;
}
.who-dots .active-dot {
  background: black;
}
.who-dots .previous {
  background: red;
}
.who-dots .next {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="who-global">
  <li class="who active-slide col-md-12">
    <ul class="who-first">
      <li class="who-img col-md-6">
        <img src="./wp-content/themes/portfolio-2016/images/test-who-3.png" alt="">
      </li>
      <li class="who-text col-md-6">Texte 1</li>
    </ul>
  </li>
  <li class="who col-md-12">
    <ul class="who-second">
      <li class="who-img col-md-6">
        <img src="./wp-content/themes/portfolio-2016/images/test-who-3.png" alt="">
      </li>
      <li class="who-text col-md-6">Texte 2</li>
    </ul>
  </li>
  <li class="who col-md-12">
    <ul class="who-third">
      <li class="who-img col-md-6">
        <img src="./wp-content/themes/portfolio-2016/images/test-who-3.png" alt="">
      </li>
      <li class="who-text col-md-6">TExte 3</li>
    </ul>
  </li>
</ul>

<ul class="who-dots">
  <li class="previous"></li>
  <li class="active-dot"></li>
  <li></li>
  <li></li>
  <li class="next"></li>
</ul>

使用 next/prev 按钮时幻灯片的分页无法正常工作

Slideshow's pagination is not working properly using next/prev buttons

jquery

pagination

slideshow