Question

我有一个小脚本可以向前和向后循环一些项目。这是一个显示相同问题的简化笔：http://codepen.io/2kp/pen/sLoEb

$(document).ready(function(){

  var totalslides = $('p').length;
  var currentslide;
  var newslide;

  $('.left').on('click', function() {
    currentslide = $('p.active').index()+1;
    if (currentslide == 1){
      newslide = totalslides;
    }
    else {
      newslide = currentslide-1;
    }
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  });

  $('.right').on('click', function() {
    currentslide = $('.slide.active').index()+1;
    if (currentslide == totalslides){
      newslide = 1;
    }
    else {
      newslide = currentslide+1;
    }
    $('p.active').removeClass('active');
    $('p:nth-child('+newslide+')').addClass('active');
  });

});

左按钮工作正常，但右按钮工作正常。在真实网站上，除了iPad之外，左右按钮都可以正常工作。 iPhone，Android和台式机都很好。

真的很奇怪。任何帮助都感激不尽。

Answer 1

使用.eq()代替:nth-child。我们也可以通过使用模数来减少对if块的需求（来自SO Answer的想法）：

＆＃13;

$(function() {
  var $slides = $('p.slide');

  function transition(step) {
    var $activeSlide = $('p.slide.active').removeClass('active');
    var nextIndex = ($slides.index($activeSlide) + step) % $slides.length;
    $slides.eq(nextIndex).addClass('active');
  }

  $('.left').on('click', $.proxy(transition, null, -1));
  $('.right').on('click', $.proxy(transition, null, 1));
})();

＆＃13;

button {
  font-size: 32px;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="left">&#9756;</button> <button class="right">&#9758;</button>
<div class="slides">
<p class="slide active">1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias neque necessitatibus, deleniti natus est dolores aut earum maiores ullam quas quis mollitia nemo, tenetur magni. Veniam in porro perspiciatis.</p>
<p class="slide">2: Itaque impedit ratione, eveniet, quisquam voluptate perferendis eum accusantium! Quia mollitia dolor a nulla, tenetur nesciunt ex tempore officia autem modi sit molestiae veniam voluptates vero itaque beatae similique quidem.</p>
<p class="slide">3: Est libero consequuntur ipsum distinctio corporis doloremque sunt iure autem tenetur labore at voluptate quam, repudiandae alias asperiores unde iste. Perspiciatis laborum, culpa sit maxime nostrum consequuntur labore reprehenderit adipisci.</p>
<p class="slide">4: Error eveniet, modi a sunt animi quos accusamus ullam quibusdam earum doloribus, omnis dicta ut. Facilis laboriosam autem libero itaque accusantium explicabo blanditiis veritatis sint nesciunt obcaecati, deleniti! Alias, impedit?</p>
<p class="slide">5: Modi neque harum vero minima nemo, dolor dolorum veritatis fuga obcaecati vitae! Quo commodi temporibus obcaecati rem repudiandae vel assumenda nostrum alias. Debitis non esse culpa officiis eum exercitationem distinctio!</p>
</div>

＆＃13;

Answer 2

我不确定为什么。可能与我的脚本的其他部分有某种冲突，但用eq（）替换nth-child（）并调整数学在iPad上解决问题。

使用jQuery循环遍历元素

2 个答案: