Выберите div с стрелками вверх/вниз

Question

У меня есть ввод текста, и когда я сосредоточен на нем - сначала «.oftion» из «#number_list» становится «.selected». Я хочу создать функцию - когда нажата клавиша «Вверх» или «Вниз» на клавиатуре, чем следующий или предыдущий элемент «number_list» грандиозный «выбран» класс и текущий элемент, потерявший этот класс.

<input type="text" name="number" id="number" maxlength="30" /> 

<div id="number_list"> 
    <div class='option selected'>aaa</div> 
    <div class='option'>bbb</div> 
    <div class='option'>ccc</div> 
</div> 

http://jsfiddle.net/YNyEr/

Я пытался создать массив элементов «.option» и получить текущий элемент по индексу, но я не нашел способ сделать это. Так как это можно сделать? Также я использую jQuery 1.5.1.

Answer 1

Как об этом быстро и грязных реализациях: http://jsfiddle.net/zerkms/YNyEr/2/

var $input = $('#some_number'), 
    current_index = $('.selected').index(), 
    $number_list = $('#number_list'), 
    $options = $number_list.find('.option'), 
    items_total = $options.length; 

$input.val(current_index); 

$input.bind('keyup', function(e) { 
    if (e.keyCode == 40) { 
     if (current_index + 1 < items_total) { 
      current_index++; 
      change_selection(); 
     } 
    } else if (e.keyCode == 38) { 
     if (current_index > 0) { 
      current_index--; 
      change_selection(); 
     } 
    } 
}); 

function change_selection() 
{ 
    $options.removeClass('selected'); 
    $options.eq(current_index).addClass('selected'); 
    $input.val(current_index); 
}​ 

Answer 2

Я думаю, вам стоит взглянуть на события javascript onkeyup и onkeydown. Если вы играете с выбором по идентификатору должно быть довольно легко,

Например

<div onkeydown='document.getElementById("nextid").className += "selected";this.className -= "selected";' class='option'>bbb</div>