Question

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

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 |使用箭头键列出导航

1 个答案: