Question

对于我的“类别”收集文档的（5），我正在显示一个按钮。我想当我单击按钮时，它会根据旧值将文档“活动”字段的值更改为“是”或“否”。

这是我尝试过的：

    db.collection("categories").orderBy("id", "asc").onSnapshot(snapshot =>
    {
        let changes = snapshot.docChanges();

        changes.forEach(change =>
        {
            if (change.type == "added" || change.type == "removed")
            {
                renderNavItems(change.doc);
                renderTab(change.doc);
                renderButtons(change.doc);
            }
            else if(change.type == "modified")
            {
                buttonFc(change.doc);
            }
         })
     });

RenderButtons（）函数：（仅一次）

var buttons;
var button;
var buttonDiv;


function renderButtons(doc)
{
    button = document.createElement("button");
    buttonDiv = document.createElement("div");

    buttonDiv.setAttribute("class","btnDiv"+doc.data().id);

        if (doc.data().active == "yes")
        {
            button.setAttribute("class", "btn btn-success btn-sm btnView");
            button.textContent= "Slide activée";
        }
        else if (doc.data().active == "no")
        {
            button.setAttribute("class", "btn btn-danger btn-sm btnView");
            button.textContent= "Slide desactivée";
        }

    buttonDiv.appendChild(button);

    var tab = document.querySelector("#"+doc.data().name);
    tab.appendChild(buttonDiv);

    buttonFc(doc);
}

buttonFc（）函数（每次，我的字段的值都会更改）

function buttonFc(doc)
{
    DocRef = db.collection("categories").doc(doc.id);

    if (doc.data().active == "yes")
    {
        button.addEventListener('click', () => 
        {
            console.log("YES TO NO");
            DocRef.update({
                "active": "no"
        })
    });

}
else if (doc.data().active == "no")
{

    button.addEventListener('click', () => 
    {
        console.log("NO TO YES");
        DocRef.update({
            "active": "yes"
            })
    });
}

但是，当我单击一个按钮时，我的函数会循环，并且每次循环都会更大。

当我单击5次：

Exemple

Answer 1

buttonFc（）函数每次被调用时都会添加一个新的事件侦听器，因此最终在同一按钮上会出现多个事件侦听器。这就解释了为什么每次循环都会变得“更大”。确保只添加一次事件监听器。

单击一次时，根据il值更新文档字段值

1 个答案: