javascript - 如何在列表中创建编辑功能？

Question

Currently I have a delete function already which is shown by a cross
因此，我如何做到这一点是通过使用一个函数将来自另一个数据库的信息呈现到此列表中。

function renderCafe(doc){
let li = document.createElement('li');
let name = document.createElement('span');
let city = document.createElement('span');
let cross = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = doc.data().name;
city.textContent = doc.data().city;
cross.textContent = 'x';

li.appendChild(name);
li.appendChild(city);
li.appendChild(cross);  

cafeList.appendChild(li);

// deleting data
cross.addEventListener('click', (e) => {
    e.stopPropagation();
    let id = e.target.parentElement.getAttribute('data-id');
    db.collection('cafes').doc(id).delete();
});}

那么如何创建像这样删除一个的编辑按钮功能呢？它也应该是单击时发生的 EventListener 吗？

I was thinking to have an edit button, when clicked, changes into "Update", while the static information turns into a text box with the current values.

Then when the "Update" is being clicked, it then saves the information.

我是一名学生，对 javascript 没有任何先验知识，我从我可以在网上找到的教程中获取了这些代码。

Answer 1

这是一个可能的解决方案，类似于您的风格。

更换 alert与数据库更新。

确保您正在监听文档更改，并相应地更新您的 UI，以便新名称和城市将替换您的旧名称和城市。

const cafeList = document.getElementById('cafe-list');

const sampleCafes = [
{ data: () => ({ name: 'new cafe', city: 'new city'}), id: 'sample-cafe' },
];

sampleCafes.forEach(cafe => renderCafe(cafe));

function renderCafe(doc){
let li = document.createElement('li');
let name = document.createElement('p');
let city = document.createElement('p');
let nameInput = document.createElement('input');
let cityInput = document.createElement('input');
let edit = document.createElement('div');
let submit = document.createElement('div');
let cross = document.createElement('div');

li.setAttribute('data-id', doc.id);
name.textContent = doc.data().name;
city.textContent = doc.data().city;
nameInput.value = name.textContent;
cityInput.value = city.textContent;
nameInput.hidden = true;
cityInput.hidden = true;
edit.textContent = 'edit';
submit.textContent = 'submit';
submit.hidden = true;
cross.textContent = 'x';

li.appendChild(name);
li.appendChild(city);
li.appendChild(nameInput);
li.appendChild(cityInput);
li.appendChild(edit);
li.appendChild(submit);
li.appendChild(cross);  

cafeList.appendChild(li);

// deleting data
cross.addEventListener('click', (e) => {
    e.stopPropagation();
    let id = e.target.parentElement.getAttribute('data-id');
    alert(`db.collection('cafes').doc(id).delete();`);
});

// editing data
edit.addEventListener('click', (e) => {
    e.stopPropagation();
    nameInput.hidden = false;
    cityInput.hidden = false;
    submit.hidden = false;
    name.hidden = true;
    city.hidden = true;
    edit.hidden = true;
});

// submitting new data
submit.addEventListener('click', (e) => {
    e.stopPropagation();
    const id = e.target.parentElement.getAttribute('data-id');
    nameInput.hidden = true;
    cityInput.hidden = true;
    submit.hidden = true;
    name.hidden = false;
    city.hidden = false;
    edit.hidden = false;
    const newName = nameInput.value;
    const newCity = cityInput.value;
    alert(`TODO: update doc '${id}' to\n{name: '${newName}', city: '${newCity}'}.`);
});
}

<ul id="cafe-list"></ul>