2

フォームに次の 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>

上記のコードは、さまざまなフォーム要素に対して数回繰り返されます。に焦点を当てているときは、3 番目の列にあることinputを望みます。fadeInspan

私はこれを達成するためのコードを書きましたがinput、ページ上の任意のものに焦点を当てると、の子でspanはなく、すべてのヘルパーが表示されます。span.helper.has-help

このJSFiddleにコードがあります。

これでどんな助けでも大歓迎です。

4

3 に答える 3

6

問題は、.help-inline クラスですべての要素を選択していることです。JavaScript を次のように変更してみてください。

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

ここにあなたのフィドルの上に構築されたデモがあります。

于 2012-12-20T13:14:50.663 に答える
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/

于 2012-12-20T13:16:03.153 に答える
1

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

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

現在の入力「this」参照の親を見つけます。次に、フェードインする子供を見つけます。

于 2012-12-20T13:19:40.207 に答える