[英]Cycling through elements with jQuery
我有一个小脚本可以前后循环浏览某些项目。 这是显示相同问题的简化笔: 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和台式机都可以。
真的很奇怪。 非常感谢任何帮助。
使用.eq()
代替:nth-child
。 同样,我们可以通过使用模量(来自此SO Answer的想法)来减少对if块的需要:
$(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)); })();
button { font-size: 32px; } .slide { display: none; } .slide.active { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="left">☜</button> <button class="right">☞</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>
我不知道为什么。 可能与我脚本的其他部分存在某种冲突,但是用eq()替换nth-child()并调整数学可以解决iPad上的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.