jquery - 按向上和向下箭头选择 anchor 标记

Question

我想在按下向上和向下箭头时选择 anchor 标记。

这是我的代码

 var keyindex,alinks;
    keyindex = -1;
    $('#ajax_response').keydown(function(e)
        {
            alinks = $('#ajax_response').find('a');
            if(e.keyCode == 40)
            {
                e.preventDefault();     
                if(keyindex == -1)
                {
                keyindex = 1;
                }
                if(alinks.length > 0 && keyindex < alinks.length)
                {
                $('#ajax_response').find('a')[keyindex++].focus();
                }
            }
            if(e.keyCode == 38)
            {
                e.preventDefault();
                if(keyindex == alinks.length)
                {
                keyindex = keyindex-2;
                }

                if(alinks.length > 0 && keyindex < alinks.length && keyindex >=0)
                {
                $('#ajax_response').find('a')[keyindex--].focus();
                }
            }
        });

但有时它无法正常工作。任何人都可以在此代码中找到问题，请告诉我。

请检查此链接 http://jsfiddle.net/rz550dwa/

Answer 1

您可以通过以下方式使其更加动态和高效

1. 缓存包含链接的 jQuery 对象，这样您就不需要每次都搜索它们。
2. 使用filter()与 :focus动态查找当前聚焦的元素，而不必自己跟踪它。

这意味着如果用户手动聚焦/单击其中一个链接，它将继续正常工作。

如果你想让它循环，你只需要额外的else语句。否则将其删除。

$(document).ready(function(){
    var alinks = $('#ajax_response').find('a');
    if(alinks.length > 0) {
        alinks.first().focus();
        $('#ajax_response').keydown(function(e)
        {
            // get the index of the current focussed a 
            var keyIndex = alinks.index(alinks.filter(':focus'));
            if(e.keyCode == 40)
            {
                e.preventDefault();
                // find the next index to highlight
                if(keyIndex < 0) {
                    keyIndex = 0;
                } else if(keyIndex < alinks.length - 1) {
                    keyIndex++;
                } else {
                    keyIndex = 0; // for cyclic behaviour
                }
                alinks.eq(keyIndex).focus();
            }
            else if(e.keyCode == 38)
            {
                e.preventDefault();
                // find the previous index to highlight
                if(keyIndex > alinks.length -1) {
                    keyIndex = alinks.length -1;
                } else if(keyIndex > 0) {
                    keyIndex--;
                } else {
                    keyIndex = alinks.length -1; // for cyclic behaviour
                }
                alinks.eq(keyIndex).focus();
            }
        });
    }
});

Updated Fiddle