使用箭头键浏览列表?(JavaScript/JQ)

问题描述

我似乎无法找到如何完成此任务的答案，但这是我多次看到的功能.本质上，我是在呼应一个列表，我想创建使用箭头键/输入突出显示和选择这些项目的能力.有人可以帮助我了解如何实现这一目标吗?我知道如何使用键码(当然)，只是不知道如何将其变成功能代码以选择列表中的项目...

I can't seem to find an answer to how to accomplish this, yet it's a feature I've seen several times. Essentially I'm echoing out a list and I would like to create the ability to highlight and select these items using arrow keys/enter. Can someone help give me an idea as to how I can accomplish this? I know how to use keycodes (of course), just not how to turn that into functioning code for selecting items on a list...

我在想也许我必须有某种隐藏的单选按钮来将其标记为选中或未选中...但即便如此我也不知道如何从一个单选按钮跳到另一个单选按钮在列表中.因此，如果有人可以帮我解决这个问题，我将不胜感激.谢谢.

I was thinking maybe I'd have to have some sort of hidden radio button to mark it as selected or not... but even then I don't know how I would jump from one radio button to the other up and down the list. So if anyone could give me a hand with this I'd really appreciate it. Thank you.

推荐答案

由于您没有真正解释您遇到的问题，我只是创建了一个通用解决方案.希望这会有所帮助:

Since you didn't really explain what you're having trouble with, I just created a general solution. Hopefully this helps:

var li = $('li');
var liSelected;
$(window).keydown(function(e) {
    if(e.which === 40) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else {
            liSelected = li.eq(0).addClass('selected');
        }
    } else if(e.which === 38) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
        }
    }
});

JSFiddle:http://jsfiddle.net/Vtn5Y/

这篇关于使用箭头键浏览列表?(JavaScript/JQ)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！