关于带按钮的模板字符串循环的建议

Posted 2023-05-07

【中文标题】关于带按钮的模板字符串循环的建议

【英文标题】：Advice on Template String Loop with Buttons

【发布时间】：2020-02-10 12:02:18

【问题描述】：

我目前正在开发一个迷你 Web 应用程序，希望得到一些建议。我知道我的问题的原因，并且我知道解决它的一种方法，但这将意味着撤消我已经完成的许多工作。

我遇到的问题是我目前在 for 循环中使用模板字符串来打印数据，并且我有一个带有侦听器的删除按钮。目前它只适用于列表中的最后一个按钮，我知道这是因为我每次使用 html = x 时都会破坏 innerHTML。

我想知道的是....有没有一种简单的方法可以解决这个问题，还是我应该只使用 append child 等代替？

        for(let prod of products)
           console.log("Doc ID",doc.id);

        const li1 = `
            <p><div>$prod.name <div class="right"><font class=pink-text>Location:</font> $$prod.location  <button data-remove-button-id="$doc.id" class="btn-remove">Delete</button></div></div></p>
        `;
        html += li1;

         //end for loop




        const li2 = `
            <br />
            <button class="btn blue darken-2 z-depth-0 right modal-trigger" data-target="modal-prodedit">Add/Edit Attributes</button><br />
            </div>
            </li>
        `;
        html += li2;                    

        productList.innerHTML = html;


        const removeBtn = document.querySelector(`[data-remove-button-id="$doc.id"]`);
        console.log("removeBTN",removeBtn);
        removeBtn.addEventListener('click', (e) => 
          e.preventDefault();
            console.log(`deleted row $e.target.dataset.removeButtonId`);
          );

【问题讨论】：

是的，您可能应该使用 DOM 方法而不是 innerHTML，但如果您只是将处理程序安装在 all 按钮上，您的方法仍然可以工作，而不仅仅是一个按钮?使用querySelectorAll。

doc.id 来自哪里？

好吧，我正在使用 Firestore 数据库，所以这就是 doc.id 的来源code doc.ref.collection("vendors").get().then((Snapshot) => const vendor = Snapshot.docs.map(doc => doc.data()); console.log(doc.id, '=>', vendor); 我会试试 querySelectorAll 看看它对我有什么作用...... .如果不是，我将使用 DOM 方法。谢谢。

【参考方案1】：

您正在使用 querySelector() 方法，该方法返回它找到的第一个元素。如果您想将该侦听器附加到所有行，您需要使用Document.querySelectorAll()。您需要区分选择了哪一行，这似乎不在您的 DOM 模型中。所以我会在你的按钮上添加一个data-product-id 属性，监听器可以使用它来知道哪个产品被删除了。

【讨论】：

即使我已经有一个 data-remove-button-id="$doc.id" 我还需要 data-product-id 吗？

是的。据我所知，您的示例 doc.id 不会每行更改。所有行的值都相同，因此在第 1 行和第 2 行单击删除，如果仅与 doc.id 一起使用，侦听器不会做任何不同的事情。这就是为什么我推断您需要在删除按钮侦听器中使用 product.id 。让它每行做一些不同的事情。

嗯嗯好的。是的 doc.id 作为 Firestore 数据库中每一行的不同值返回。因此，当 for of 循环对数据库中的每个产品执行时，它将返回数据库中分配的唯一 ID。我还在我的 console.log 输出中确认了这一点。

【参考方案2】：

感谢大家对此的帮助。

SelectAll 在某种程度上有效，但我决定从头开始重做我的代码，使用 DOM 元素来 appendChild。完成后，这使一切变得容易得多。决定对其进行更改，以使自己在代码方面具有更大的灵活性。