Javascript 这里'；这就是我想要的；到目前为止，我已经学会了，但是它'；它不工作：重新CSS、HTML、JS并使按钮切换

我得到了以下建议：

Javascript：

function classToggle() {
    this.classList.toggle('on');
    this.classList.toggle('off');
}
document.querySelector('.onoff').addEventListener('click', classToggle);

HTML：

<img class="on onoff" src='http://s29.postimg.org/xc5u3fufn/image.png' />

<img class="on onoff" src='http://s29.postimg.org/xc5u3fufn/image.png' />

但这两个按钮中只有一个可以开关。为什么呢？它们都有非唯一的必需类标识符“onoff”，这应该让JS引用它们，分别在类打开或关闭之间切换，对吗

---

附带问题：如果类实际上什么都不做，我是否必须在CSS中定义类.onoff？

querySelector

返回与传递给它的选择器匹配的第一个元素

如果要获取多个元素，则需要使用

querySelectorAll

，它将返回节点列表，而不是像数组一样循环的HTMLElementNode

或者，将事件侦听器添加到两个图像的祖先元素中，然后测试是否单击了该图像

someElement.addEventListener('click', function (evt) {
    var el = evt.target;
    if (el.classList.contains('onoff')) {
        el.classList.toggle('on');
        el.classList.toggle('off');
    }
});

---

querySelector

返回第一个匹配项。您希望

querySelectorAll

查找所有匹配项

也就是说，您必须循环返回的元素

[].forEach.call(document.querySelectorAll(".onoff"),function(e) {
    e.addEventListener("click",classToggle);
});

---

很抱歉。我不知道你在这里指的是什么，因为我是CSS的超级新手，没有JS方面的培训。您所说的是，我需要获取上面链接中的内容并对其进行修改：“[function classToggle（）{this.classList.toggle（'on'）；this.classList.toggle（'off'）；}document.querySelector（'onoff'）。addEventListener（'click'，classToggle）；]”forEach.call（document.querySelectorAll（'onoff'）），函数（e）{e.addEventListener（“单击”，类切换）；}）；'我如何让这些评论中的“代码”起作用？！啊，太令人沮丧了，拿着我给你的代码，把它扔进去，令人惊讶！哦，天哪，你是我的英雄。我怎么给你分数？另外，如果您需要制作一些图形，请将详细信息发送给我。先生或女士，你帮了我很大的忙。

[].forEach.call(document.querySelectorAll(".onoff"),function(e) {
    e.addEventListener("click",classToggle);
});