Question

我有一个带字母的数组。使用右键和左键我想左右导航，在输入键上，我希望激活当前位置（或字母），然后使用向上和向下键更改当前位置的字母。当再次按下enter时，我想离开激活状态并能够再次左右移动。左右导航有效，但向上和向下箭头同时更改所有字母。我想我需要以某种方式使用$(this)。对不起，如果我的代码看起来很乱，我真的无法将这些内容拼凑起来。如果有人能指出我正确的方向，我会很高兴的！

    // $( document ).ready()
    var letters = ['','a','b','c','d','e'];

    var letterIndex = 0;

    $('a:first').focus();

            $(document).keydown(function(e) {

                    e.preventDefault();

                    var keyCode = e.which;
                        arrow = {up: 38, down: 40, right: 39, left: 37, enter: 13};

                    switch(e.which) {
                        case arrow.up:
                            letterIndex = letterIndex + 1;
                            $(this).find('a').html(letters[letterIndex]);
                        break;

                        case arrow.down:
                            letterIndex = letterIndex - 1;
                            $(this).find('a').html(letters[letterIndex]);
                        break;

                        case arrow.right:
                            $('a:focus').closest('li').next().find('a').focus();
                        break;

                        case arrow.left:
                            $('a:focus').closest('li').prev().find('a').focus();
                        break;

                        case arrow.enter:
                            $(this).find('a').focus().toggleClass('highlight');
                        break;
                    }

            });
        });

HTML

<ul>
   <li><a href="">a</a></li>
   <li><a href="">b</a></li>
   <li><a href="">c</a></li>
   <li><a href="">d</a></li>
</ul>

fiddle

Answer 1

这就是你想要的。

改进：

1。 letterIndex不应该是全局可用的，因为每个链接元素都维持其自己的国家。

2。将事件绑定到每个链接元素并使用$(this)而不是使用find()搜索事件所有者。

var letters = ['','a','b','c','d','e'];

$('a:first').focus();

$("a").on('keydown', function(e){

    e.preventDefault();

    var keyCode = e.which;
        arrow = {up: 38, down: 40, right: 39, left: 37, enter: 13};

    //each link has its own state so the variable needs to be local like this
    letterIndex = letters.indexOf($(this).html());  

    //loop index from max to min
    if(letterIndex == letters.length)
         letterIndex = -1;

    switch(e.which) {
        case arrow.up:
            letterIndex = letterIndex + 1;
            $(this).html(letters[letterIndex]);
        break;

        case arrow.down:
            letterIndex = letterIndex - 1;
            $(this).html(letters[letterIndex]);
        break;

        case arrow.right:
            $(this).closest('li').next().find('a').focus();
        break;

        case arrow.left:
            $(this).closest('li').prev().find('a').focus();
        break;

        case arrow.enter:
            $(this).focus().toggleClass('highlight');
        break;
    }

});

Answer 2

将a:first保存在变量中，以便您可以在嵌套函数中使用它（在您的情况下为$(document).keydown()）。

$('a:first').focus();

        var $this = $(this); // save this element for later use

        $(document).keydown(function(e) {

                e.preventDefault();

                var keyCode = e.which;
                    arrow = {up: 38, down: 40, right: 39, left: 37, enter: 13};

                switch(e.which) {
                    case arrow.up:
                        letterIndex = letterIndex + 1;
                        $this.html(letters[letterIndex]); // use it here
                    break;

                ...

        }

在当前位置迭代数组

2 个答案:

改进：