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的{{1}}个孩子.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);
});

这是demo，建立在你的小提琴上。

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”引用的父级。然后找到孩子淡入。

使用jquery显示焦点上的子div

3 个答案: