我正在尝试优化第一块代码。 为什么我的方法不起作用？ 缩短代码的最佳方法是什么？

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 本身。