javascript - 这是我到目前为止所学到的，但它不起作用 : RE CSS, HTML、JS 并使按钮切换

Question

我得到了这个建议:

http://jsfiddle.net/Tpz86/16/

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' />

CSS:

.on {
    opacity: 1.0;
}

.off {
    opacity:0.0;
}
.onoff {   
}

但是两个按钮中只有一个可以打开和关闭。这是为什么？它们都有非唯一要求的 CLASS 标识符“onoff”，这应该使它们被 JS 引用为在也分别具有 ON 或 OFF 类之间切换，对吧？

附带问题:如果类 .onoff 基本上什么都不做，我是否必须在 CSS 中定义它？

Answer 1

querySelector 返回第一个匹配项。您希望 querySelectorAll 找到所有匹配项。

也就是说，您将不得不遍历返回的元素。

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