Question

我有文字输入，当我专注于它时 - '#number_list'的'.option'首先成为'.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

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

例如

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

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

2 个答案: