Ребята привет! Задача такая. Есть разметка ниже, при нажатии на кнопку с классом 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>