切换 $(this) 元素的兄弟元素的可见性 |没有唯一 ID [jQuery]

Posted 2023-05-09

【中文标题】切换 $(this) 元素的兄弟元素的可见性 |没有唯一 ID [jQuery]

【英文标题】：Toggle visibility of sibling element of $(this) element | No unique ID [jQuery]

【发布时间】：2017-08-22 19:54:25

【问题描述】：

我需要div.edit-button 来切换其兄弟div.additionalFieldForm。

请注意，页面上有多个div.edit-button 和div.additionalFieldForm，但我想定位与单击的div.edit-button 位于同一“系列”中的div.additionalFieldForm。

$(".edit-button").click(function () 

  // PROBLEMATIC SELECTOR BELOW:
  $(this).closest("div").prev().toggle();

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm">Content</div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm">Content</div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

我尝试了其他选择器，但我不能专门针对被单击的编辑按钮的div.additionalFieldForm 兄弟。

编辑：我意识到一定存在潜在问题，因为选择器适用于 jsFiddle (http://jsfiddle.net/wf7jjoq7/)，但不适用于我的网站，没有任何控制台错误。

【问题讨论】：

要隐藏附加字段标签吗？

不，我想在每次点击 div.edit-button 时切换 div.additionalFieldForm 的可见性。

【参考方案1】：

尝试使用siblings()

$(".edit-button").click(function ()   
  $(this).siblings(".additionalFieldForm").toggle();
);

【讨论】：

这也不起作用，我尝试了多个选择器，似乎没有一个起作用。

【参考方案2】：

试试这个解决方案：

$(".edit-button").click(function () 

  // PROBLEMATIC SELECTOR BELOW:
  $(this).parent().find(".additionalFieldForm").first().toggle();

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
  <li class="customFieldLi">
    <label class="top_title">Additional Field</label>
    <div class="additionalFieldForm"></div>
    <div class="edit-button">Edit</div>
    <div class="remove-button">Remove</div>
  </li>
</ul>

【参考方案3】：

li 是共同的父母。所以，

$(".edit-button").click(function ()   
 $(this).closest("li").find(".additionalFieldForm").toggle();
);

【讨论】：

这对我也不起作用，也没有控制台错误。