通过输入的Div列表导航

Question

我有文字输入。我希望这样做--当用户按下箭头键时，焦点应该从输入转移到输入下面的div列表中的第一个元素，并在我们一直按下键时继续向下移动，当用户按下enter键时，div中的文本应该被设置为输入值。反之亦然，如果用户按下向上箭头键，焦点应该转移到列表中的最后一个元素，并在我们继续按向上键时继续向上移动。

这是我发明的小提琴- 示例

Answer 1

$(function(){
    var $list = $('#list').children();
    var index = 0;

    function down(){
        if(index == $list.length - 1) index = 0;
        else index++;           
        move();
    };
    function up(){
        if(index == 0) index = $list.length - 1;
        else index--;           
        move();
    };

    function enter(){
        var val = $($list[index]).html();
        $('input').val(val);
    };

    function move()
    {
        $list.removeClass('highlight');
        $($list[index]).addClass('highlight');
    };

    // highlights first element 
    move();

    $('input').on('keydown', function(e){
        switch(e.keyCode)
        {
            case 13:
                enter();
                break;
            case 40:
                down();
                break;
            case 38:
                up();
                break;
        }
    });
});

JSFiddle - http://jsfiddle.net/tt0nnzvm/4/

编辑:更新了小提琴和代码