2

Ребята привет! Задача такая. Есть разметка ниже, при нажатии на кнопку с классом contrEdit, появляется кнопка с классом contrSave. Проблема в том, что когда нажимаешь кнопку редактировать во-втором блоке, кнопка сохранить появляется, но в первом блоке. Я не понимаю, как привязать контекст, что бы работали кнопки из блока в котором нахожусь, а не первые найденные по условию. Надеюсь, проблему описал понятно.

Суть такой разметки в том, что на странице будет список агентов, по каждому есть информация и ее нужно редактировать. Соответственно, хочу повесить единый обработчик на кнопки. Прошу подсказки, как правильно реализовать, в каком направлении смотреть. Спасибо.

function switchBtn(event) {
  let target = event.target;
  if (target.tagName !== "BUTTON") return;
  if (target.classList.contains("contrEdit")) {
    contrSave.classList.remove("hidden");
  }

}
<div class="container">
  <div class="agent">
    <div class="agent-info">
      ...
    </div>
    <div class="btn-container">
      <button class="contrEdit" type="button">Редактировать блок</button>
      <button class="contrSave" type="button">Сохранить блок</button>
    </div>
  </div>
  <div class="agent">
    <div class="agent-info">
      ...
    </div>
    <div class="btn-container">
      <button class="contrEdit" type="button">Редактировать блок</button>
      <button class="contrSave" type="button">Сохранить блок</button>
    </div>
  </div>
</div>

1 ответ 1

2
if (target.classList.contains("contrEdit")) {
  target.parentNode.querySelector(".contrSave").classList.remove("hidden");
}
0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.