Question

我希望我的左/右箭头转到下一个/上一个.embedded_post div。问题是它只能工作一次，我只能在第一个和第二个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();
});

Answer 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();
});

使用箭头键滚动到下一个div

1 个答案: