jquery - 使用向上/向下箭头选择 div

Question

我有文本输入，当我专注于它时 - '#number_list' 的第一个 '.option' 变为 '.selected'。我想创建一个功能 - 当按下键盘上的向上或向下键而不是'number_list'的下一个或上一个元素时，granding'selected'类和当前元素失去这个类。

<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);
}​