jquery - 使用jquery在焦点上显示子div

Question

我的表单有以下 html 标记：

<div class="row has-help">
  <div class="col">Label</div>
  <div class="col"><input /></div>
  <div class="col"><span class="helper">Foobar</span></div>
</div>

上面的代码针对不同的表单元素重复了几次。当input专注于我希望fadeIn在span第三栏。

我已经编写了代码来实现这一点，但是当我专注于input页面上的任何内容时，所有助手都会出现，span而不仅仅是span.helper..has-help

我有这个JSFiddle上的代码。

任何帮助将不胜感激。

Answer 1

问题是您正在使用 .help-inline 类选择所有元素。尝试将javascript更改为：

$("input").focusin(function() {
   $(this).parent().siblings(".help-inline").fadeIn(400);
}).focusout(function () {
   $(this).parent().siblings(".help-inline").fadeOut(100);
});

这是演示，建立在您的小提琴之上。

Answer 2

您需要选择最近的一个div.has-inline-help

$("input").focusin(function() {
           $(".help-inline", $(this).closest('.has-help-inline')).fadeIn(400);
        }).focusout(function () {
            $(".help-inline", $(this).closest('.has-help-inline')).fadeOut(100);
        });

http://jsfiddle.net/tarabyte/cgYQR/6/

Answer 3

http://jsfiddle.net/cgYQR/12/

    $("input").focusin(function() {
       $(this).parents(".has-help-inline").find(".help-inline").fadeIn(400);
    })

查找当前输入“this”引用的父级。然后找到要淡入的孩子。