我目前有一个基本的 CRUD 网站,最近我开始开发该网站,以列出许多产品和相关价格。我的技能不是最好的,但我正在为正义而战,并希望获得一些帮助/指导来实现我想要实现的目标。
我将数据存储在 Firestore 数据库中,并将其拉出并显示在列表中。为了显示它,我将子集合中的值添加到数组中,然后使用 for 循环来循环并提取每个值并使用 html 模板字符串显示它。我决定,由于我已经在创建和显示方面达到了不错的水平,所以我想添加一个按钮(或者在我的情况下是一个图标),它允许我编辑返回的每个值。
const shelf = doc.data();
doc.ref.collection("products").get().then((Snapshot) => {
const products = Snapshot.docs.map(doc => doc.data());
// start of for loop
for(let product of products){
// start of template string inside backticks
const li = `
<p><div>${product.name} <div class="right"><font class=pink-text>Price:</font> $${product.price} <a href="#" class="grey-text modal-trigger" data-target="modal-priceedit"><i class="material-icons">create</i></a></div></div></p>
`;
// end of template string inside backticks
html += li;
// start of edit price section
let price = product.price;
const priceeditForm = document.querySelector('#priceedit-form');
priceeditForm.addEventListener('submit', (e) => {
e.preventDefault();
console.log("Document with ID: ", doc.id);
doc.ref.collection("vendors").doc(price)get().then((Snapshot) => {
const priceedit = Snapshot.docs.map(doc => doc.data());
price: priceeditForm['price'].value
}).then(() => {
// close the signup modal & reset form
const modal = document.querySelector('#modal-priceedit');
M.Modal.getInstance(modal).close();
priceeditForm.reset();
}).catch(err => {
console.log(err.message);
});
});
//end of edit price section
}
// end of for loop
productList.innerHTML = html;
});
我希望当单击该图标时,会弹出一个模型,其中包含一个价格输入字段,我可以输入新价格并提交它,从而更新数据库中的值。
我将非常感谢任何可以帮助我的人。预先感谢您。
最佳答案
感谢所有为此提供帮助的人。我决定使用 DOM 元素来附加子元素,从头开始重做我的代码。一旦完成,一切就变得容易多了。决定更改它以使自己的代码更加灵活。
关于javascript - 使用按钮单击更新 For 循环中从 Firestore 返回的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58107754/