Question

如何使$(this)选择器专注于当前元素？在这个jsfiddle，我已经安装它只进入指定的元素，所以你不能按Enter键来激活你所在的按钮。 http://jsfiddle.net/mathzarro/gd6Ep/1/

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

聚苯乙烯。我已经说过我作为一个表达！最初的编码器是Ian，这里是链接..谢谢@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结构不是很灵活。我已经重新编写了你的代码，以便它的形状更好。以下是主要功能

如果您选择
可以根据需要使用多个按钮
第一个或最后一个div没有硬编码（智能环绕）
输出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();
    }
});

你如何使$（this）选择器专注于当前元素？

1 个答案: