jQuery toggleClass 仅在单击的 div 之外的一个 div 上，并非都具有相同的类答案

【问题标题】：jQuery toggleClass on only one div outside the clicked div, not all with the same classjQuery toggleClass 仅在单击的 div 之外的一个 div 上，并非都具有相同的类
【发布时间】：2020-01-07 11:45:15
【问题描述】：

已经尝试了一段时间并阅读了与此相关的所有其他问题，但找不到简单的答案。

我有一排有 3 个列（不是表，引导程序）。最后一列有一个带有edit 类的i 图标。当我单击它时，我希望行下方的 div 切换类 d-none （因此在单击时使其可见或不可见）。这可行，但它使具有相同类的所有 div 可见，我只想使具有相同类的一个 div 可见。

我尝试了 parent、next、find、最接近等方法，都不起作用。

var edit_link = $('.edit');
var edit_box = $('.edit-box');

edit_link.on('click', function(e) {
  e.preventDefault();
  edit_box.toggleClass('d-none');
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-2 text-right text-primary">
    <i class="fas fa-pencil-alt edit"></i>
  </div>
</div>
<div class="buttons row d-none edit-box">
  block I want shown when clicked on the edit pencil
</div>

感谢您的帮助！

【问题讨论】：

标签： jquery html

【解决方案1】：

问题是因为edit_box 拥有一个包含 all .edit-box 元素的 jQuery 对象。相反，您需要使用 DOM 遍历来找到与单击的 edit_link 实例相关的那个。

为此，您可以使用closest() 获取最近的.row，然后使用next()。试试这个：

var $edit_link = $('.edit');

$edit_link.on('click', function() {
  $(this).closest('.row').next('.buttons').toggleClass('d-none');
});

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-2 text-right text-primary">
    <i class="fas fa-pencil-alt edit">Pencil</i>
  </div>
</div>
<div class="buttons row d-none edit-box">
  block I want shown when clicked on the edit pencil
</div>
<div class="row">
  <div class="col-2 text-right text-primary">
    <i class="fas fa-pencil-alt edit">Pencil</i>
  </div>
</div>
<div class="buttons row d-none edit-box">
  block I want shown when clicked on the edit pencil
</div>

【讨论】：