Question

当相关输入字段被聚焦/模糊时，我知道如何在每个列表项中显示/隐藏子项'.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.

Answer 1

如果你的结构绝对如上，那么你可以简单地使用parent和next ...

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

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

Answer 2

以下假设您的标记结构不会改变。您可以使用.parent()获取父元素，.next()获取以下兄弟元素，使用.children()获取子元素。您可以将两个事件处理程序合并为一个，并通过将事件处理程序委派给更高的DOM树来提高效率：

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

请注意，事件类型检查正在查找focusin - jQuery似乎实际绑定到focusin和focusout而不是focus和blur。< / p>

jQuery在动态列表中显示/隐藏唯一的子项

2 个答案: