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

Question

当用户分别单击具有 ID 'add' 'delete' 和 'toggle' 的 3 个按钮时，我尝试添加、删除和切换类样式到 3 <li> 秒。但是除了 classList 方法名称和按钮 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');
    })
});

Answer 1

你可以这样做：

function modifyClass(action) {
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList[action]('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 (const action of ["add", "remove", "toggle"])
    document.getElementById(action).addEventListener("click", ()=>{
        document.querySelectorAll('#todos li').forEach((li)=>{
            li.classList[action]('listStyles');
        });
    });

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

How to avoid code duplication in this Javascript code snippet

javascript

function

dom-manipulation

code-duplication