Как добавить кнопку на указанную карту из нескольких карт?
Например, у меня есть 4 карты, когда я нажимаю кнопку редактирования (у каждой карты есть 1 кнопка редактирования с тем же классом), я хочу создать кнопку сохранения, но только на той карте, где я нажал кнопку редактирования.
до сих пор я пытался добавить логический индекс, но понял, что это не сработает, попытался выполнить цикл на каждом, но я не знаю, как остановиться на той карте, где я нажал кнопку
function modifyCard(){
const cards = document.getElementsByClassName("card");
for(let card of cards){
const saveBtn = document.createElement("button");
saveBtn.textContent = "save";
saveBtn.setAttribute("class", "save-change");
card.appendChild(saveBtn);
}
}
<div id=content>
<div class = "card">
<label> Name </label>
<p class = "name answer"> Example 1</p>
<label>Hours</hours>
<p class = "time answer"> 32</p>
<button id = "settings"> Edit</button>
</div>
<div class = "card">
<label> Name </label>
<p class = "name answer"> Example 2</p>
<label>Hours</hours>
<p class = "time answer"> 32</p>
<button id = "settings"> Edit</button>
</div>
</div>
Поэтому, когда я нажимаю кнопку «Редактировать» 2. карты, я хочу создать кнопку «Сохранить» только на карте «Пример 2».
(И также возможно, что у меня есть 50 разных карт, поэтому я бы не стал добавлять идентификатор к каждой из них)
<div id=content> <div class = "card"> <label> Имя </label> <p class = "name answer"> Пример 1</p> <label>Часы</hours> <p class = " время ответа"> 32</p> <button id = "settings"> Изменить</button> </div> <div class = "card"> <label> Имя </label> <p class = "name answer" > Пример 2</p> <label>Часы</hours> <p class = "time answer"> 32</p> <button id = "settings"> Редактировать</button> </div> </div> Поэтому, когда я нажимаю кнопку «Редактировать» 2. карты, я хочу создать кнопку «Сохранить» только на карте «Пример 2».
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы не можете использовать один и тот же идентификатор для разных элементов, использовать настраиваемый атрибут (настраиваемые атрибуты начинаются с data-) или вместо этого использовать класс css.
const editBtns = document.querySelectorAll('[data-id=settings]');
editBtns.forEach(btn => {
btn.addEventListener('click', ()=> {
// if there is no save button in the card component just create it
if (!btn.parentElement.querySelector('[data-exist]')){
const saveBtn = document.createElement("button");
saveBtn.textContent = "save";
// custom attribute
saveBtn.setAttribute('data-exist', 'true');
saveBtn.setAttribute("class", "save-change");
// ParentElement in this case is the card
btn.parentElement.appendChild(saveBtn);
// When save button clicked
saveBtn.addEventListener('click', ()=> {
console.info("do what you want to do with save button here");
})
}
});
});<div id = "content">
<div class = "card">
<label> Name </label>
<p class = "name answer"> Example 1</p> <label>Hours</label>
<p class = "time answer"> 32</p>
<button data-id = "settings"> Edit</button>
</div>
<div class = "card">
<label> Name </label>
<p class = "name answer"> Example 2</p>
<label>Hours</label>
<p class = "time answer"> 32</p>
<button data-id = "settings"> Edit</button>
</div>
</div>
добавьте свой html, чтобы мы могли помочь вам лучше