如何避免此 Javascript 代碼片段中的代碼重復

Question

當用戶單擊 3 個分別具有 ids 'add' 'delete' 和 'toggle' 的按鈕時，我嘗試添加、刪除和切換類樣式到 3 個<li> 。 但是除了 classList 方法名稱和按鈕 ID 之外，這些代碼會重復。

無論如何我可以寫一個 function 以避免重復嗎？

這是我的代碼。

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');
        });
    });