javascript - 单击单个按钮时根据 ils 值更新文档字段值

Question

对于我的“类别”集合文档 (5) 的每个，我都显示了一个按钮。我希望当我单击我的按钮时，它会将我的文档“事件”字段的值更改为"is"或“否”，具体取决于旧值。

这是我试过的:

    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 次时:

Answer 1

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