Jquery滚动到next / prev div与同一个类

时间:2015-01-20 17:37:49

标签: jquery

我有几个div,都是同一个类(post),我有一个简单的UP和DOWN导航。

<nav>
<a href="" id="down">Down</a>
<a href="" id="up">Up</a>
</nav>

<div class="post one">Lorem ipsum dolor sit amet.</div>
<div class="post two">Lorem ipsum dolor sit amet.</div>
<div class="post three">Lorem ipsum dolor sit amet.</div>

每次用户点击Down时,我想要向下滚动一个div。每次用户点击Up我都希望当时上一个div。

我几乎得到了它,但是如果你再次点击两次然后又想再次上升两次,则会出现一些错误,然后滚动卡在中间。此外,如果您位于最底部并再次单击“向下”,则从顶部开始。此外,如果你单击一个向上和向下一个,滚动它不遵循它应该的逻辑。

请在此处查看http://jsfiddle.net/grovve/bs6443y4/

我认为它与我的变量&#34; $ currentElement&#34;相关联。在给定的时间,这个变量的价值究竟是多少,对吗?究竟我错过了什么让它按预期工作?

3 个答案:

答案 0 :(得分:3)

您收到错误的原因很简单 - 如果您位于列表的底部(即最后一个元素),$currentElement.next()将不返回任何内容。当你处于最顶层时,会发生类似的事情。因此,您应该使用if来检查触发点击处理程序时是否存在下一个或上一个元素。我们可以使用.length来评估这种情况。

与此同时,您可能需要查看using .stop() before actually adding another animation to the queue。如果你不使用它,你将最终在每次鼠标点击时向jQuery动画队列添加太多项目,这是我们不想要的 - 它可能导致生涩的动画或动画需要很长时间才能完成。因此,我们在每个动画前面调用.stop(true)来清除整个队列。

最后,当我们使用.prev().next()遍历DOM时,我们接受所有元素 - 因此我们应该包含选择器,即.prev('.post').next('.post')分别达到预期的行为。

var $currentElement = $(".post").first();

$("#down").click(function () {
    var $nextElement = $currentElement.next('.post');
    // Check if next element actually exists
    if($nextElement.length) {
        // If yes, update:
        // 1. $currentElement
        // 2. Scroll position
        $currentElement = $nextElement;
        $('html, body').stop(true).animate({
            scrollTop: $nextElement.offset().top
        }, 1000);
    }
    return false;
});

$("#up").click(function () {
    var $prevElement = $currentElement.prev('.post');
    // Check if previous element actually exists
    if($prevElement.length) {
        // If yes, update:
        // 1. $currentElement
        // 2. Scroll position
        $currentElement = $prevElement;
        $('html, body').stop(true).animate({
            scrollTop: $prevElement.offset().top
        }, 1000);
    }
    return false;  
});

请参阅此处的更新和工作小提琴:http://jsfiddle.net/teddyrised/bs6443y4/7/

答案 1 :(得分:0)

看看函数中的注释为up。你在那里使用了var,因此你的范围是错误的。

var $currentElement = $(".post").first();

$("#down").click(function () {
    $currentElement = $currentElement.next();
    $('html, body').animate({
        scrollTop: $currentElement.offset().top
    }, 1000);
    return false;
});

$("#up").click(function () {
    /* here's your problem! the var tells js to only use currentElement in this function not globally, the variable on the first line isn't overwritten!
    var currentElement = $currentElement.prev();
    to fix it simply remove the var! */
    $currentElement = $currentElement.prev();
    $('html, body').animate({
        scrollTop: $currentElement.offset().top
    }, 1000);
    return false;  
});

答案 2 :(得分:0)

如果您想要向上/向下从顶部到顶部包装帖子,请尝试从Terry的答案中分出的代码:

var $currentElement = $(".post").first();

    $("#down").click(function () {
        var currentElement = $currentElement.next(".post");
        // Check if next element actually exists
        if(currentElement.length) {
            // If yes, update:
            // 1. $currentElement
            // 2. Scroll position
            $currentElement = currentElement;
        } else {
            $currentElement = currentElement = $(".post").first();
        }

        $('html, body').stop(true).animate({
            scrollTop: $(currentElement).offset().top
        }, 1000);
        return false;
    });

    $("#up").click(function () {
        var currentElement = $currentElement.prev(".post");
        // Check if previous element actually exists
        if(currentElement.length) {
            // If yes, update:
            // 1. $currentElement
            // 2. Scroll position
            $currentElement = currentElement;
        } else {
            $currentElement = currentElement = $(".post").last();
        }

        $('html, body').stop(true).animate({
            scrollTop: $(currentElement).offset().top
        }, 1000);
        return false;
    });

在此处查看演示:http://jsfiddle.net/bs6443y4/8/