JQuery Focus - 有输入？答案

【问题标题】：JQuery Focus - with input?JQuery Focus - 有输入？
【发布时间】：2012-05-19 18:15:39
【问题描述】：

据我了解，焦点事件必须与输入框之类的东西一起使用，但这似乎对我不起作用。我有以下小提琴......当有人专注于文本框时，我试图让“指南”div出现。我不确定部分问题是否是我使用“兄弟姐妹”以及输入框是否需要唯一 ID？但是我把唯一标识符作为父级，然后引用兄弟级...

http://jsfiddle.net/jhacks/2jjZF/2/

你会看到我确实有一些额外的代码用于“错误”和“好的”消息。我正在努力让 JQuery 事件与 Twitter 注册页面之类的内容相匹配，如果有人可以阻止 https://twiter.com/signup，但这是另一篇文章。

感谢任何和所有帮助。谢谢！

【问题讨论】：

标签： jquery input focus

【解决方案1】：

$('input#registerBox').focus(
    function() {
     $(this)
       .closest('#registerBoxName') // go to parent div#registerBoxName
       .next('.registerGuidance')   // move to next div.registerGuidance
       .find('#registerGuideName')  // finding target #registerGuideName within div.registerGuidance
       .show(); // make display
   }
});

【讨论】：

谢谢！我使用了这段代码，它也很有意义。这篇文章与其他用户关于遍历的文章一起非常有用。终于成功了！

【解决方案2】：

你是对的，兄弟姐妹是错误的选择器。 Siblings 指的是具有相同父元素的其他元素，而您的输入字段没有这些元素。

因为您使用的是 ID 选择器，并且 ID 是唯一的定义，所以无需遍历。

$('input#registerBox').focus(
    function() {
        $('#registerGuideName').show();
    }
);

您已经在使用带有 $(this) 的 jquery 对象，那么为什么不直接选择该 ID 呢？

如果您的脚本需要遍历，因为您的文档中有多个，您需要使用类或数据属性而不是 ID 选择器。正确的遍历意味着找到一个共同的父母，然后找到合适的孩子。

http://api.jquery.com/category/traversing/

$('input.registerBox').focus(
    function() {
        $(this).closest('.registerName').find('.registerGuideName').show();
    }
);

【讨论】：

感谢您的帮助！一方面，我修复了一些东西并在更合适的地方使用了类。现在我对遍历有了更多的了解，这非常有用。谢谢！