Навигация по клавиатуре из пропуска поля ввода при добавлении класса - PullRequest
Новая
       28

Навигация по клавиатуре из пропуска поля ввода при добавлении класса

2 голосов
/ 22 января 2012

У меня есть поле ввода и div с четырьмя операционными системами.Когда курсор находится в поле ввода и вы нажимаете стрелку вниз, он должен перемещаться вниз, циклически проходя по каждому разделу ОС, когда вы нажимаете вниз.Проблема в том, что когда вы добираетесь до последнего div и нажимаете вниз, он должен вернуться к первому div сверху, однако, кажется, что он «пропускает» несуществующий div на первой клавиатуре, нажмите вниз, но если вы нажметево второй раз он возвращается к первому элементу div, как и должно быть.Как я могу сделать так, чтобы он не «пропускал» и сразу переходил к первому div в списке, нажимая вниз от последнего div в списке?Любая идея о том, как заставить это работать правильно?

Вот HTML: 

 <input id="system" value="" />
 <div id="system-drop">
    <div class="os active">Mac</div>
    <div class="os">Windows</div>
    <div class="os">Linux</div>
    <div class="os">Other</div>
 </div>

Вот jQuery: 

$("#system").live('keyup',function(e){        
var curr = $('#system-drop').find('.active');

if(e.keyCode == 40 || e.charCode == 40){

    if(curr.length){
            $('.os.active').removeClass('active');
            $(curr).next().addClass('active');
    } else{
        $('#system-drop div:first-child').addClass('active');
    }

}

});

Вот скрипка:http://jsfiddle.net/TF6Rb/771/

1 Ответ

2 голосов
/ 22 января 2012

Значение curr.length не было нулем до cur.next().length = 0.Это означает, что, когда курсор находится в последнем div, длина cur.length по-прежнему равна 1, но cur.next() нет.

Модифицированный jsFiddle здесь

Измените ваше состояние, как показано ниже, и оно должно работать, 

    var nextActive = $(curr).next();
    $('.os.active').removeClass('active');

    if(nextActive .length){
        nextActive.addClass('active');
    } else{
        $('#system-drop div:first-child').addClass('active');
    }
...