0

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

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

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

4

1 回答 1

2

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

liSelected.trigger('focus');在 keydown 处理程序结束时调用并删除其他调用$("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"));
});

这是一个工作示例

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

改进建议

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

  • 如果您按一下标签，则不会中断
  • 适用于您需要的任意数量的按钮
  • 第一个或最后一个 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();
    }
});
于 2013-03-28T18:14:44.783 回答