0

関連する入力フィールドがフォーカスされている/ぼやけている場合に、各リスト項目から子「.link」のみを表示/非表示にする方法についてのアイデア。

次のようなものですが、（これを）どのように適用するのかわかりませんか？

$('.input').focus(function () {
  $('li').next('.link').show();
});

$('.input').blur(function () {
  $('li').next('.link').hide();
});

マークアップ：

<ul>
   <li>
     <input class="input" value="1">
   </li>

   <li">   
     <a class="link" href="#"></a>         
   </li>
 </ul>

 <ul>
   <li>
     <input class="input" value="2">
   </li>

   <li>   
     <a class="link" href="#"></a>         
   </li>
 </ul>
etc.
4

2 に答える 2

1

構造が間違いなく上記のとおりである場合は、単に親と次を使用できます...

$('.input').focus(function () {
    $(this).parent().next().find(".link").show();
});

$('.input').blur(function () {
    $(this).parent().next().find(".link").hide();
});
于 2012-11-15T14:03:53.093 に答える
1

以下は、マークアップの構造が変更されないことを前提としています。を使用.parent()して、親要素.next()を取得し、次の兄弟.children()を取得し、子要素を取得できます。両方のイベントハンドラーを1つに結合し、イベントハンドラーをDOMツリーの上位に委任することで効率を向上させることができます。

$("ul").on("focus blur", ".input", function (e) {
    var method = e.type === "focusin" ? "show" : "hide";
    $(this).parent().next().children(".link")[method]();
});

イベントタイプチェックが探していることに注意してくださいfocusin-jQueryは実際にはfocusinandfocusoutではなくfocusandにバインドしているように見えますblur。

于 2012-11-15T14:07:36.353 に答える