使用箭头键浏览列表? (JavaScript的/ JQ) [英] Navigate through list using arrow keys? (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...
我在想我也许d必须有一些隐藏的单选按钮,将其标记为选中或不...但即便如此,我也不知道如何从列表中的一个单选按钮跳到另一个单选按钮。所以如果有人能帮我一把,我真的很感激。谢谢。
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/
JSFiddle: http://jsfiddle.net/Vtn5Y/
这篇关于使用箭头键浏览列表? (JavaScript的/ JQ)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!