jQuery在动态列表中只显示/隐藏子元素

pinkon5k 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(146)

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

jquery

来源：https://stackoverflow.com/questions/13399057/jquery-show-hide-only-child-within-a-dynamic-list

2条答案

按热度按时间

kqhtkvqz1#

下面的代码假定标记的结构不会改变。可以使用.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。

赞(0）回复(0）举报 2023-06-22

q3aa05252#

如果你的结构肯定是如上所述，那么你可以简单地使用parent和next。

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

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

赞(0）回复(0）举报 2023-06-22

我来回答

jQuery在动态列表中只显示/隐藏子元素

2条答案

相关问题

热门标签

最新问答