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

2024-05-21 • 问答

当用户单击分别具有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');
    })
});

您可以这样做：

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代码片段中的代码重复

kubikiri 回答：如何避免此Javascript代码片段中的代码重复

大家都在问