jQuery toggleClass только для одного div вне выделенного div, не для всех с одним и тем же классом

Question

Уже некоторое время пытаюсь прочитать все остальные вопросы, связанные с этим, но не могу найти простой ответ.

У меня есть строка с 3 столбцами (не таблица, bootstrap) , Последний столбец имеет значок i с классом edit. Когда я щелкаю по нему, я хочу, чтобы div под строкой переключал класс d-none (чтобы он был виден или не виден при щелчке). Это работает, но делает все div с одним и тем же классом видимыми, я просто хочу сделать один div с тем же классом видимым.

Я попробовал родительский, следующий, найти, ближайший et c методы все не работает.

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>

Спасибо за любую помощь!

Answer 1

Проблема в том, что edit_box содержит объект jQuery, содержащий все .edit-box элементы. Вместо этого вам нужно использовать обход 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>