Working Demo

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/

Answer 1

试试这段代码：

Working Demo

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

为此，请替换此行：

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

使用：

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

Answer 2

这在以下小提琴中解决了

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

Answer 3

您可以通过

使其更具动态性和效率

缓存包含链接的jQuery对象，这样您就不必每次都搜索它们。
使用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

锚标签选择按向上和向下箭头

3 个答案:

Working Demo

更新