0

我希望我的左/右箭头转到下一个/上一个.embedded_postdiv。问题是它只能工作一次，我只能在第一个和第二个 div 之间滚动。我认为这是 -100 的偏移量，但删除偏移量并没有解决问题。我在想，在我动画到下一个 div 之后，jQuery 选择器没有移动到任何地方，所以我被卡住了。

jQuery(document).keydown(function(e){
    switch(e.which) {
        case 37: // left
            jQuery('html, body').animate({scrollTop:jQuery('.embedded_post').prev().offset().top - 100}, 500);          
            return;
        break;

        case 38: // up
        break;

        case 39: // right
            var next_embed = jQuery('.embedded_post').next();
            jQuery('html, body').animate({scrollTop:next_embed.offset().top - 100}, 500);
            return;
        break;

        case 40: //down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});
4

1 回答 1

1

.offset()如果选择器返回多个元素，则只会返回列表第一个元素的位置。.current尝试向您当前关注的元素添加/删除一个类并获取下一个/上一个：

jQuery('.embedded_post:eq(0)').addClass('current');

jQuery(document).keydown(function(e){
    switch(e.which) {
        case 37: // left
            var $current = jQuery('.embedded_post.current'),
                $prev_embed = $current.prev();
            jQuery('html, body').animate({scrollTop:$prev_embed.offset().top - 100}, 500);
            $current.removeClass('current');
            $prev_embed.addClass('current');
            return;
        break;

        case 38: // up
        break;

        case 39: // right
            var $current = jQuery('.embedded_post.current'),
                $next_embed = $current.next();
            jQuery('html, body').animate({scrollTop:$next_embed.offset().top - 100}, 500);
            $current.removeClass('current');
            $next_embed.addClass('current');
            return;
        break;

        case 40: //down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault();
});
于 2012-12-04T00:45:21.473 回答