javascript - 这是写这个的正确格式吗？它不工作

Question

我重新开始学习 JavaScript 并想知道为什么这不起作用。控制台中没有显示任何错误。

我用干编码让它工作，但现在我试图不使用干编码，但它不工作。

let simonLi = document.querySelector('#simon');
let simonPic = document.querySelector('#simon-pic');
let bruceLi = document.querySelector('#bruce');
let brucePic = document.querySelector('#bruce-pic');
let benLi = document.querySelector('#ben');
let benPic = document.querySelector('#ben-pic');


let pictureChange = pic => {
    if (pic.className === "hide") {
        pic.classList.remove("hide");
    } else {
        pic.classList.add("hide");
    }
};

simonLi.addEventListener('click', pictureChange(simonPic));

bruceLi.addEventListener('click', pictureChange(brucePic));

benLi.addEventListener('click', pictureChange(benPic));

没有错误消息，并且假设在单击 li 时隐藏和显示图像。

标签： javascripthtmlcss

Answer 1

您正在将函数 pictureChange 的结果（恰好是undefined）附加到单击事件，而不是附加函数。

您可以尝试更换

let pictureChange = pic => {
    if (pic.classList.contains("hide")) {
        pic.classList.remove("hide");
    } else {
        pic.classList.add("hide");
    }
};

和

let pictureChange = pic => {
    return function() {
        if (pic.className === "hide") {
            pic.classList.remove("hide");
        } else {
            pic.classList.add("hide");
        }
    }
};

当您使用它时，请考虑pic.classList.toggle()改用。