你如何使$（this）选择器关注当前元素？ [英] How do you make the $(this) selector focus on current element?

问题描述

你如何使 $（this）选择器专注于当前元素？在这个jsfiddle中，我已经挂载了它只进入一个指定的元素，所以你不能按下回车键来激活你所在的按钮。 http://jsfiddle.net/mathzarro/gd6Ep/1/

继承人的棘手部分： $（button：first）。trigger（'focus'）;

我已经说过，我是作为一个表情登上的！原来的编码是伊恩，这里是链接..谢谢@伊恩！ http://jsfiddle.net/Vtn5Y/

真正的问题是由HazMat提到的，你关注的是错误的元素（总是使用 $（button：first）。焦点）; 。

调用 liSelected.trigger（'focus'）; 在你的keydown处理程序的结尾，并删除其他调用 $（button：first）。trigger（'focus'）; 将解决问题。 >

您还有另一个问题
$ b $ $ $ $ $（button：eq（1） ）.click（function（）{
//为什么要调用这个？删除这行
$（button：eq（0））。trigger（'click'）;
更新（$（span：last））;
}）;

< a href =http://jsfiddle.net/gd6Ep/5/ =nofollow noreferrer>下面是一个工作示例

另外， jsfiddle是伟大的，但你应该张贴代码相关的代码h

改进建议强大>

您发布的代码患有

• 如果选项卡不会中断


• 适用于多个按钮
  
• 没有第一个或最后一个div的硬编码（智能环绕）
  
• 没有输出div的硬编码，所有处理在一个地方，
  
• 向上/向右前进，向下/向左向后


• 不需要跟踪元素自己，这就是什么文档。


• 每段代码都是分隔的
  
  
  
  
  • 将类添加到选定的按钮（仅限CSS ）（所以它不需要添加一个选择类到按钮。
    
  • 更新输出
  
  
  • 将焦点设置到下一个按钮
  li>
  

以下是代码

  var buttons = $（'button'） ; 
 var spans = $（'span'）; 
 
 //点击按钮时更新范围
 buttons.click（function（e）{
 var span = $（spans [Array.prototype.indexOf.call（buttons ，document.activeElement）]）; 
 span.text（parseInt（span.text（），10）+ 1）; 
}）; 
 
 //处理导航，把焦点放在下一个元素
 $（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（）; 
} 
}）; 
  

How do you make the $(this) selector focus on current element? In this jsfiddle, I've mounted it only goes in a specified element, so you cant press enter to activate the button you 'are in'. http://jsfiddle.net/mathzarro/gd6Ep/1/

Heres the tricky part: $("button:first").trigger('focus');

Ps. I've said I mounted as an expression! The original coder was Ian, here it is the link.. thanks @Ian! http://jsfiddle.net/Vtn5Y/

解决方案

The real problem was mentioned by HazMat, you were focusing on the wrong element (always the first button using $("button:first").trigger('focus');.

Calling liSelected.trigger('focus'); at the end of your keydown handler and removing the other calls to $("button:first").trigger('focus'); will fix the problem.

You also have another problem

$("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

Also, the jsfiddle is great but you should post the code relevant code here too.

Improvement suggestion

The code you posted suffers from brittle queries, internal coupling, that is, it's not very flexible to changing HTML structures. I've re-worked your code so that it's in better shape. Here are the main features

• Doesn't break if you tab
• Works for as many buttons as you need
• No hardcoding for first or last div (smart wrap around)
• No hardcoding of the output divs, all handled in one place, by relying on the fact that it's the nth button being clicked.
• Up/right go forwards, down/left go backwards
• No need to track the element yourself, that's what document.activeElement is for
• Each section of code is separated
  • Add class to selected button (CSS only) (so it doesn't need to add a "selected" class to buttons.
  • Update output
  • Set focus on the next buttons

Here's the code

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）选择器关注当前元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！