如何让 $(this) 选择器关注当前元素？

Question

如何让$(this) 选择器关注当前元素？在这个 jsfiddle 中，我已经将它安装在一个指定的元素中，所以你不能按 enter 来激活你“所在”的按钮。 http://jsfiddle.net/mathzarro/gd6Ep/1/

这是棘手的部分：$("button:first").trigger('focus');

附言。我已经说过我作为一种表情安装了！最初的编码员是伊恩，这是链接..谢谢@Ian！ http://jsfiddle.net/Vtn5Y/

Answer 1

HazMat 提到了真正的问题，你关注的是错误的元素（总是使用$("button:first").trigger('focus'); 的第一个按钮。

在 keydown 处理程序结束时调用 liSelected.trigger('focus'); 并删除对 $("button:first").trigger('focus'); 的其他调用将解决问题。

你还有一个问题

$("button:eq(1)").click(function () {
    // Why are you calling this? Remove this line
    $("button:eq(0)").trigger('click');     
    update($("span:last"));
});

Here's a working example

此外，jsfiddle 很棒，但您也应该在此处发布代码相关代码。

Improvement suggestion

您发布的代码存在brittle queries，内部耦合，即更改HTML结构不是很灵活。我已经重新编写了您的代码，使其处于更好的状态。以下是主要功能

• Tab 键不会中断
• 适用于您需要的任意数量的按钮
• 第一个或最后一个 div 没有硬编码（智能环绕）
• 输出 div 没有硬编码，全部在一个地方处理，依赖于它是第 n 个被单击的按钮这一事实。
• 上/右前进，下/左后退
• 无需自己跟踪元素，这就是document.activeElement 的用途
• 每段代码都是分开的
  • 向选定按钮添加类（仅限 CSS）（因此不需要向按钮添加“选定”类。
  • 更新输出
  • 将焦点设置在下一个按钮上

这是代码

var buttons =  $('button');
var spans = $('span');

// Update the span when button is clicked
buttons.click(function(e){
    var span = $(spans[Array.prototype.indexOf.call(buttons, document.activeElement)]);
    span.text(parseInt(span.text(), 10) + 1);
});

// Handle the navigation, set focus on the next element
$(window).keydown(function(e){
    var isLeft = e.which === 38 || e.which === 37, 
        isRight = e.which === 40 || e.which === 39;
    if(isLeft || isRight){
        var currentButtonIndex =  Array.prototype.indexOf.call(buttons, document.activeElement);
        var nextButtonIndex;
        if (currentButtonIndex === -1) {
            nextButtonIndex = 0;
        } else {
            var toAdd = isLeft ? -1 : 1;
            nextButtonIndex = (currentButtonIndex + toAdd + buttons.length) % buttons.length;
        }
        buttons[nextButtonIndex].focus();
    }
});