javascript - 使用箭头键/jQuery 浏览多个列表？

Question

This question有一个有用的答案，展示了如何使用 jQuery 上下导航列表，您可以看到 here 。代码是这样的:

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(); 实际给予元素焦点

我的 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 项目会有。

Answer 1

我已经修改了您的 fiddle 中的现有代码以使其工作:

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 个不同的 ul，该功能可以正常工作。

• 第一次按向上/向下键以及当您想要循环浏览最后/第一个项目时，我必须更改查找 first()/last( ) 来自之前保存的所选 ul，而不是全局 lis 列表。

• 在我的编辑中，我确实更改了保存的 jquery 元素，以使用其名称以 $ 开头的更常见语义，这不是必要的更改。

要回答您的另一个问题，通过使用类而不是 .focus，可以更轻松地跟踪所选元素并设置其样式。