如何避免此Javascript代码段中的代码重复

当用户分别单击ID为“add”、“delete”和“toggle”的3个按钮时，我尝试将classstyles添加、删除和切换到3

s。但是除了类列表方法名称和按钮id之外，代码本身也会重复

我是否可以编写一个函数来避免重复

这是我的密码

document.querySelector('#add').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.add('listStyles');
    })
});
document.querySelector('#delete').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.remove('listStyles');
    })
});
document.querySelector('#toggle').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.toggle('listStyles');
    })
});

---

你可以这样做：

函数修改类（操作）{
document.queryselectoral（“#todos li”）.forEach（（li）=>{
类列表[动作]（'listStyles'）；
})
}
document.querySelector（'#add'）.addEventListener（'click'，（）=>{modifyClass（“add”）}）；
document.querySelector（'#delete'）.addEventListener（'click'，（）=>{modifyClass（“remove”）}）；
document.querySelector（'#toggle'）.addEventListener（'click'，（）=>{modifyClass（“toggle”）}）；

如果将元素

#delete

更改为

#remove

，则可以执行以下操作：

for（常量操作[“添加”、“删除”、“切换”]）
document.getElementById（action）.addEventListener（“单击”，（）=>{
document.queryselectoral（“#todos li”）.forEach（（li）=>{
类列表[动作]（'listStyles'）；
});
});

您可以使用阵列删除更多冗余+1好主意，但是需要将

#delete

更改为

#remove

。我已经尝试了for of loop方法。但最后一个动作（在本例中为“切换”）应用于您正确的每个按钮。我忘了在

操作

之前放置

let

或

const

，因此

操作

最终进入全局范围。我编辑了我的问题。哦，我明白了。我在循环中添加了一个函数，现在它可以工作了