0

.embedded_post左/右矢印を次/前のdivに移動させたい。問題は、一度しか機能せず、最初と 2 番目の 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 に答える