jquery 如何滚动到下一页&下一页&下一页.......元素

wbgh16ku  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(163)
<div class="wrap">
        <div class="layer">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
        </div>
    </div>
<span class="next" style="cursor:pointer;"> (next div) </span>

带ScrollTo插件的jQuery(http://demos.flesler.com/jquery/scrollTo/

$('.next').click(function() {
    $(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});

演示:http://jsfiddle.net/UaGjs/8/
它不工作:(它只工作第一次

inb24sb2

inb24sb21#

使用Tomalak的答案,您需要将引用obj指向更新到下一个元素
http://jsfiddle.net/UaGjs/7/

var next;
$('.next').click(function() {
   if ( next === undefined ) {
     next = $('.post').next();
   } else {
      next = next.next();   
   }
   $(".wrap").scrollTo(next , 800, {margin:true} );
});

我已经用Prev更新了它,但它可以改进以删除重复
http://jsfiddle.net/UaGjs/10/
我注意到有一个名为Serial Scroll的插件
最终编辑
http://jsfiddle.net/nickywaites/UaGjs/13/

yks3o0rb

yks3o0rb2#

因为您总是使用$('.post')重新获得DOM元素的句柄,而不是重复使用对象并在其上迭代调用.next()
试试下面的方法。它还没有经过测试,而且还很粗糙,但应该可以演示如何绕过范围问题。

$(function() {
    var $obj = $('post');
    $('.next').click(function() {
        $('.wrap').scrollTo($obj.next(), 800, { margin:true });
    });
});
mw3dktmi

mw3dktmi3#

因为您总是使用$('.post')重新获得DOM元素的句柄,而不是重复使用对象并在其上迭代调用.next()
试试下面的方法。它还没有经过测试,而且还很粗糙,但应该可以演示如何绕过范围问题。

mqkwyuun

mqkwyuun4#

我没有太多的运气与下一个()。我所做的是将同一个类的所有元素加载到一个数组中:

myArray = $('.post');

然后初始化一个索引:

index = 1;

然后遍历数组:

$('.next').click(function() {
 $(".wrap").scrollTo( myArray[index], 800, {margin:true} );
 index++;
});

希望这是有帮助的!

相关问题