我正在嘗試優化第一塊代碼。 為什么我的方法不起作用？ 縮短代碼的最佳方法是什么？

Question

我嘗試優化的代碼：

function classToggle1() {
    document.getElementById("div1").classList.toggle('fa-folder');
    document.getElementById("div1").classList.toggle('fa-folder-open');
}
function classToggle2() {
    document.getElementById("div2").classList.toggle('fa-folder');
    document.getElementById("div2").classList.toggle('fa-folder-open');
}
function classToggle3() {
    document.getElementById("div3").classList.toggle('fa-folder');
    document.getElementById("div3").classList.toggle('fa-folder-open');
}
document.querySelector('#x').addEventListener('click', classToggle1);
document.querySelector('#y').addEventListener('click', classToggle2);
document.querySelector('#z').addEventListener('click', classToggle3);

我的方法在瀏覽器中不起作用：

function classToggle(x) {
    document.getElementById(x).classList.toggle('fa-folder');
    document.getElementById(x).classList.toggle('fa-folder-open');
}
document.querySelector('#xx').addEventListener('click', classToggle("div1"));
document.querySelector('#yy').addEventListener('click', classToggle("div2"));
document.querySelector('#zz').addEventListener('click', classToggle("div3"));

在這里，我將“div1”“div2”和“div3”作為 arguments 傳遞。 我的理解是這兩個代碼塊的行為應該相同？

Answer 1

在第一個示例中，您傳入 function ( classToggle1 )，而在第二個示例中，您正在調用 function （恰好返回undefined ）。 您可以更新第二個以 enlambda 調用。

document.querySelector('#xx').addEventListener('click', () => classToggle("div1"));

或者

document.querySelector('#xx').addEventListener('click', function () { classToggle("div1"); })

Answer 2

這應該有效。

document.querySelector('#xx').addEventListener('click', () => classToggle("div1"));
document.querySelector('#yy').addEventListener('click', () => classToggle("div2"));
document.querySelector('#zz').addEventListener('click', () => classToggle("div3"));

關鍵是，您傳遞的是 classToggle(x) 的 output 而不是傳遞 function 本身。