javascript - 使用箭头键选择并突出显示元素

Question

我有一个行内 block 框列表。第一个框被设置为事件状态并突出显示。通过使用箭头键，我想将其旁边的框设置为事件状态。哪个 JS 事件在这里最好？

js fiddle

HTML

<ol>
<li class="active"></li>
<li></li>
<li></li>
</ol>

JS

$(document).keydown(function(e) {
switch(e.which) {
    case 37: // left
     $('li').addClass('active');
    break;

    case 38: // up
     $('li').addClass('active');
    break;

    case 39: // right
     $('li').addClass('active');
    break;

    case 40: // down
     $('li').addClass('active');
    break;

    default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});

CSS

li {
display: inline-block;
padding: 50px;
border: solid;
counter-increment: step-counter;
margin: 20px;
 }

Answer 1

请检查这个fiddle

The up and down can't be accurate because this depends on the style of the sheet

可以使用index来指定元素的索引

        index--;
    if (index==-1){index=$("#orderedList li").length-1;}
    $('li').removeClass('active');
     $($('li')[index]).addClass('active');