jQuery滚动到具有相同类的next/prev div [英] Jquery scroll to next/prev div with same class

问题描述

我有几个div，所有的div都具有相同的类(帖子)，并且我使用UP和DOWN进行了简单的导航.

I have several divs, all with the same class (post), and I have a simple navigation with UP and 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>

每次用户单击向下"时，我想一次向下滚动一个div.每次用户单击向上"时，我都希望一次向上移动一个格.

Everytime the user clicks in Down I want to scroll down one div at the time. Everytime the users click Up I want to go up one div at the time.

我几乎明白了，但是如果您单击两次并想再次上升两次，则滚动器会卡在中间，这会出现一些错误.同样，如果您位于最底部，又单击向下"一次，则从顶部开始.另外，如果您单击一个上一个和一个下一个，则滚动时并没有遵循应有的逻辑.

I almost got it, but there are some errors if you click down twice and then you want to go up twice again, then the scroller gets stuck in the middle. Also if you are at the very bottom and you click Down one more time, it starts from the top. Also if you click one up and one down, the scrolling it's not following the logic that it should.

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

我认为这与我的变量"$ currentElement"有关，并且在给定时间该变量的确切值是吗?我到底想让它正常工作到底缺少什么?

I assume it's something connected with my variable "$currentElement" and what is exactly the value of this variable at a given time, am I right? What exactly am I missing to make it work as it should?

推荐答案

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

The reason why you are getting an error is simple — if you are at the bottom of the list (i.e. the last element), $currentElement.next() will return nothing. The similar thing happens when you are at the top. Therefore, you should use if to check of the next or previous element exists upon the click handler being triggered. We can use .length to evaluate this condition.

同时，您可能需要考虑在实际将其他动画添加到队列之前使用.stop() .如果不使用它，最终将在每次单击鼠标时向jQuery动画队列中添加太多项目，这是我们不希望的-这可能会导致生涩的动画或需要很长时间才能完成的动画.因此，我们在每个动画之前调用.stop(true)以清除整个队列.

Meanwhile, you might want into looking at using .stop() before actually adding another animation to the queue. If you do not use it, you will end up adding too many items to the jQuery animation queue upon each mouseclick, which we do not want — it might lead to jerky animations or animations that take very long to finish. Therefore, we call .stop(true) in front of each animation to clear the entire queue.

最后，当我们使用.prev()和.next()遍历DOM时，我们接受了 all 元素-因此我们应包括选择器，即分别将.prev('.post')和.next('.post')包括在内.达到预期的行为.

Finally, when we are traversing the DOM using .prev() and .next(), we are accepting all elements — so we should include the selector, i.e. .prev('.post') and .next('.post') respectively to achieve the desired behavior.

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/

See updated and working fiddle here: http://jsfiddle.net/teddyrised/bs6443y4/7/

这篇关于jQuery滚动到具有相同类的next/prev div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！