Question

我有文字输入, 当我聚焦于它时 - 首先. 选择 # number_ list 成为. sected 。我想创建一个特性 - 当按住按在按键管上上下键比下键或按住数字列表中前端元素或按住数字列表中显示选定类别和当前元素的 prev 元素时。

<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

I think you should have a look at the javascript events onkeyup and onkeydown. If you play with the selection by id it should be quite easy,

例如

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

友情链接