Как избежать дублирования кода в этом Javascript фрагменте кода

Question

Я пытался добавлять, удалять и переключать стили классов на 3 <li> с, когда пользователь нажимал на 3 кнопки с идентификаторами «добавить», «удалить» и «переключить» соответственно. Но коды повторяются, кроме имени метода classList и идентификатора кнопки.

Есть ли в любом случае, я мог бы написать функцию, чтобы избежать повторения?

вот мой код.

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