[英]Navigate through multiple lists using arrow keys/jQuery?
这个问题有一个很有用的答案,展示了如何使用jQuery在列表中上下导航,你可以在这里看到。 代码是这样的:
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');
}
}
});
我希望实现类似的东西,但稍微复杂一些。 我将在页面上有多个列表,而不是单个列表。 我已将它们设置为可以选中它们。 一旦该列表具有焦点,我希望向上/向下箭头键在列表中移动。
我也想了解为什么上面的代码添加/删除类而不是实际使用element.focus();
实际给出元素焦点element.focus();
我的HTML标记:
<ul tabindex="0" id="client-list" class="tabbable">
<li tabindex="-1">Client 1</li>
<li tabindex="-1">Client 2</li>
</ul>
<ul tabindex="0" id="product-list" class="tabbable">
<li tabindex="-1">Product 1</li>
<li tabindex="-1">Product 2</li>
</ul>
我已经尝试修改keydown
函数来测试当前活动的元素:
if ( tabList.hasFocus ) {...
但无济于事。 我想这是一个非首发,因为该元素不会有焦点,但是子li
项目会。
我已经修改了你的小提琴中的现有代码:
http://jsfiddle.net/path411/8Pku9/
var $liSelected;
var $ulSelected;
$(window).keydown(function(e) {
// Make sure we have a ul selected
if($ulSelected) {
if(e.which === 40) {
if($liSelected) {
$liSelected.removeClass('selected');
var $next = $liSelected.next();
if($next.length) {
$liSelected = $next.addClass('selected');
}
else {
$liSelected = $ulSelected.children('li').first().addClass('selected');
}
}
else {
$liSelected = $ulSelected.children('li').first().addClass('selected');
}
}else if(e.which === 38) {
if($liSelected) {
$liSelected.removeClass('selected');
var $prev = $liSelected.prev();
if($prev.length) {
$liSelected = $prev.addClass('selected');
}
else {
$liSelected = $ulSelected.children('li').last().addClass('selected');
}
}
else {
$liSelected = $ulSelected.children('li').last().addClass('selected');
}
}
}
});
$('ul').focus(function(e) {
$ulSelected = $(this);
$liSelected.removeClass('selected');
$liSelected = false;
});
首先需要做的是使用$.focus()
来保存聚焦的ul。
.next()
和.prev()
已经只适用于兄弟姐妹,因此通过使用2个不同的uls,该功能可以正常工作。
在第一次按下向上/向下以及想要循环显示最后/第一项时,我不得不从先前保存的选定ul中找到第first()
/ last()
,而不是全局列表LIS。
在我的编辑中,我确实更改了保存的jquery元素,以使用以$开头的更常见的语义,这不是必要的更改。
要回答您的其他问题,通过使用类而不是.focus,可以更容易地跟踪所选元素以及设置样式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.