Question

我得到了这个建议：

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之间切换，对吧？

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

Answer 1

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

如果你想获得多个元素，那么你需要使用querySelectorAll来返回一个 NodeList 而不是 HTMLElementNode 你必须循环像数组一样。

或者，将事件侦听器添加到作为两个图像的祖先的元素，然后测试以查看是否单击了图像。

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

Answer 2

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

那就是说，你必须遍历返回的元素。

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

这是我到目前为止所学到的，但它不起作用：RE CSS，HTML，JS和制作按钮切换

2 个答案: