jQuery 2.1.0 |使用箭头键的列表导航

Question

我在键盘箭头键的帮助下在我的应用程序中导航。在我的应用程序中，一些动态设置的元素在列表中垂直显示。到目前为止，下面的代码允许在每个动态集 <li> 中进行水平导航，并在所有动态集 <li> 中进行垂直导航。但是有一个小故障：我似乎无法在所有可用的 link 中垂直导航（元素目标焦点不是目的地 link）。

See FIDDLE for demo。

重要：您的解决方案必须提供不考虑每个 <li> 中的元素数量或其类型或它们的类的代码。因此，为了保持代码最少和灵活，您的解决方案 必须仅引用所聚焦的源元素的索引位置 ，并以与源（源）具有相同索引的目标元素为目标大于可用目标元素索引的元素索引必须以最后一个目标元素为目标）：

<ul>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
</ul>


$(function(){

$('.card').on('keydown', function(e){

var isfocus = $(this).find('a:focus,button:focus');
var isfocusindex = $(this).find('a:focus,button:focus').index()-1;
var afocus = $(this).find('a:focus');
var bfocuslast = $(this).find('button:last:focus');

if ( e.which == 37 ) { // Left arrowkey
isfocus.prev('button,a').focus();
afocus.parent('div').find('button:last').focus();
}
if ( e.which == 39 ) { // right arrowkey
isfocus.next('button').focus();
bfocuslast.parent('div').find('a:first').focus();
}

if ( e.which == 40 ) { // down arrowkey 
isfocus.parent('div').parent('li').next('li').find('div').find('a:eq('+isfocusindex+'),button:eq('+isfocusindex+')').focus();
}
if ( e.which == 38 ) { // UP arrowkey 
isfocus.parent('div').parent('li').prev('li').find('div').find('a:eq('+isfocusindex+'),button:eq('+isfocusindex+')').focus();
}

});

});

Answer 1

这是解决我的问题的有效解决方案。我编码比没有更详细，示例用法：

WORKING FIDDLE DEMO

CSS（用于演示目的）

a:focus, button:focus {color:red}
a, button {width:55px;}
UL{display:inline-block}
ul li{margin-bottom:10px}
div > a, button{margin-left:20px;}

HTML

<ul>
<li><div class="card"><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><a href="javascript:void(0)" class="card-title">My Card</a><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><button class="card-export">CE</button><a href="javascript:void(0)" class="card-title">My Card</a><button class="vc-target">CT</button><button class="vc-target">CT</button><button class="vc-target">CT</button></div></li>
<li><div class="card"><button class="card-export">CE</button><button class="vc-target">CT</button><a href="javascript:void(0)" class="card-title">My Card</a></div></li>
<li><div class="card"><button class="card-export">CE</button><button class="vc-target">CT</button></div></li>
</ul>

JQUERY

$(function(){

$('.card').on('keydown', function(e){

var isfocus = $(this).find(':focus');
var isfocusindex = $(this).find(':focus').index();
var isfocusbegin = $(this).find('*:first:focus');
var isfocuslast = $(this).find('*:last:focus');
var isnexttarget = isfocus.parent('div').parent('li').next('li').find('div').children(':last').index();
var isprevtarget = isfocus.parent('div').parent('li').prev('li').find('div').children(':last').index();
var isindexsource = isfocus.index();

if ( e.which == 37 ) { // Left arrowkey
isfocus.prev().focus();
isfocusbegin.siblings(':last').focus();
}
if ( e.which == 39 ) { // right arrowkey
isfocus.next().focus();
isfocuslast.siblings(':first').focus();
}

if ( e.which == 40 ) { // down arrowkey
isfocus.parent('div').parent('li').next('li').find('div').children(':eq('+isfocusindex+')').focus();
if ( isindexsource > isnexttarget ) {
isfocus.parent('div').parent('li').next('li').find('div').children(':last').focus();        
}   
}  
if ( e.which == 38 ) { // UP arrowkey
isfocus.parent('div').parent('li').prev('li').find('div').children(':eq('+isfocusindex+')').focus();
if ( isindexsource > isprevtarget ) {
isfocus.parent('div').parent('li').prev('li').find('div').children(':last').focus();        
}
}

});

});

jQuery 2.1.0 |使用箭头键的列表导航

jQuery 2.1.0 | List navigation with arrow keys

jquery

keyboard-events

arrow-keys