锚点标签选择按上下箭头

Question

我希望当我按上下箭头时，能够选中锚点标签。

这是我的代码：

 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/

- John Mathew

---

这里的 keyindex 是什么？它在哪里声明的？ - Mangesh Parte

@MangeshParte 请查看更新后的问题。 - John Mathew

展示你的HTML代码，或者更好的方式是创建一个jsfiddle。 - vaso123

Answer 1

尝试这段代码：

演示效果

将您的注意力集中在第一个anchor元素上。

为此，请替换此行：

$('#ajax_response a').focus();

With:

$('#ajax_response a:eq(0)').focus();

更新

如果您单击链接，则行为会发生变化。您可以使用以下代码进行修复：

$(document).ready(function () {
    $('#ajax_response a:eq(0)').focus();
    var keyindex, alinks;
    keyindex = -1;
    // Key Events
    $('#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();
            }
        }
    });
    $('#ajax_response a').on("click", function (e) {
        var index = $(this).parent().index();
        keyindex = index+1;
        console.log(index);
    })
});

- Mangesh Parte

Answer 2

这个问题已在下面的 fiddle 中解决。

http://jsfiddle.net/rz550dwa/5/

这将循环执行！ 代码

$(document).ready(function(){
    var IndexNumber=1;
    function focusAnchor(index){
    $('#ajax_response').find('a')[index].focus();
    };
    $('#ajax_response a').focus();
    // Key Events
    $('#ajax_response').keydown(function(e)
    {
        alinks = $('#ajax_response').find('a');
        if(e.keyCode == 40)
        {
            e.preventDefault(); 
            if(IndexNumber<(alinks.length-1)){
            IndexNumber++;
                focusAnchor(IndexNumber);
            }
            else{
                IndexNumber=0;
                focusAnchor(IndexNumber);
            }
        }
        if(e.keyCode == 38)
        {
            e.preventDefault();
            if(IndexNumber>0){
            IndexNumber--;
                focusAnchor(IndexNumber);
            }
            else{
                IndexNumber=alinks.length-1;
                focusAnchor(IndexNumber);
            }
        }
    });
});

- Vignesh Subramanian

Answer 3

你可以通过以下方式使其更具动态性和效率：

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

更新的 Fiddle

- Rhumborl