Question

我尝试使用jquery做一个非常简单的幻灯片，但我的分页对我写的代码没有用，我真的不明白为什么。以下是幻灯片显示的codepen链接：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

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

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()“允许你在不修改的情况下测试jQuery对象的内容”。

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

或者，您应该考虑将.next和.previous更改为ID而不是类。您将只有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按钮，幻灯片的分页无法正常工作

1 个答案: