0

我有文本输入，当我专注于它时 - '#number_list' 的第一个 '.option' 变成了 '.selected'。我想创建一个功能 - 当按下键盘上的 Up 或 Down 键而不是 'number_list' 的下一个或 prev 元素时，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。

4

2 回答 2

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);
}​
于 2012-05-21T09:15:05.377 回答
-1

我认为你应该看看 javascript 事件 onkeyup 和 onkeydown。如果您使用 id 进行选择，那应该很容易，

例如

<div onkeydown='document.getElementById("nextid").className += "selected";this.className -= "selected";' class='option'>bbb</div>
于 2012-05-21T09:01:17.473 回答