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时隐藏并显示图像。

Answer 1

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

您可以尝试更换

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()。

Answer 2

这可能会更好：

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

function pictureChange(pic) {
  pic.classList.toggle('hide')
}

simonLi.addEventListener('click', function(e) {
  pictureChange(simonPic)
});

bruceLi.addEventListener('click', function(e) {
  pictureChange(brucePic)
});

benLi.addEventListener('click', function(e) {
  pictureChange(benPic)
});

.hide {
  color: red;
}

<div id="simon"><span id="simon-pic">Simon</span></div>
<br />
<div id="bruce"><span id="bruce-pic">Bruce</span></div>
<br />
<div id="ben"><span id="ben-pic">Ben</span></div>

Answer 3

这大大缩短了代码：

for (const li of document.querySelectorAll('li')) {
  li.addEventListener('click', (event) => {
    if (event.target.matches('li[id]')) {
       document.getElementById(`${event.target.id}-pic`).classList.toggle('hide');
    }
  })
}

这假设您的li 全部按照您显示的方式工作。否则，请为所有li提供一个通用CSS类，例如class="li-with-pic"并相应地调整querySelector：

for (const li of document.querySelectorAll('.li-with-pic')) {
  li.addEventListener('click', (event) => {
    if (event.target.matches('.li-with-pic')) {
       document.getElementById(`${event.target.id}-pic`).classList.toggle('hide');
    }
  })
}

这是写这个的正确格式吗？没用

3 个答案: