使用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);
});

这是演示,建立在你的小提琴上.