使用箭头键/jQuery浏览多个列表? [英] Navigate through multiple lists using arrow keys/jQuery?

问题描述

此问题有一个有用的答案，显示了如何使用jQuery上下浏览列表，您可以在此处看到.代码是这样的:

This question has a useful answer showing how to use jQuery to navigate up and down a list, which you can see here. The code is this:

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');
        }
    }
});

我想实现类似的功能，但是要稍微复杂一些.我的页面上将有多个列表，而不是一个列表.我已经设置好它们，以便可以将它们制表到.该列表获得焦点后，我希望向上/向下箭头键在列表中移动.

I want to achieve something similar, but slightly more complex. Rather than a single list, I will have multiple lists on my page. I have set them up so that they can be tabbed to. Once that list has focus, I want the up/down arrow keys to move through the list.

我还想了解为什么上面的代码添加/删除类而不是使用element.focus();

I also would like to understand why the code above adds/removes class rather than actually giving the element focus using 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函数以测试当前处于活动状态的元素:

I have tried amending the keydown function to test which element is currently active:

if ( tabList.hasFocus ) {...

但无济于事.我猜这是一个入门者，因为该元素没有焦点，但子li项将具有焦点.

But to no avail. I guess this is a non-starter because that element won't have focus, but the child li items will.

推荐答案

我已经修改了小提琴中的现有代码以使其正常工作:

I have modified the existing code in your fiddle to work:

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是重点.

  • The first thing that needed to be done was to save which ul was focused by using $.focus().

    .next()和.prev()已经仅可用于兄弟姐妹，因此通过使用2个不同的ul，该功能可以正常工作.

    .next() and .prev() already only work on siblings, so by using 2 different uls, that functionality works fine.

    在第一次按下上/下键以及要循环浏览最后一个/第一个项目时，我不得不更改以从先前保存的选定ul中找到first()/last()，而不是lis的全局列表.

    On first press of up/down as well as when you want to cycle through the last/first items, I had to change finding the first()/last() from the selected ul that was saved earlier, rather than a global list of lis.

    在我的编辑中，我确实更改了保存的jquery元素，以使用以$开头的更常见的语义，但这不是必需的更改.

    In my edit I did change the saved jquery elements to use the more common semantic of starting their name with a $, this isn't a necessary change.

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

    To answer your other question, by using classes instead of .focus, it is much easier to keep track of the selected element, as well as style it.

    这篇关于使用箭头键/jQuery浏览多个列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！