javascript - 在 focusin 上将类(class)添加到父级

Question

我想将类名 active 添加到父类 <label>的this 。无法弄清楚为什么它只针对第一个输入。没有 jQuery。

http://jsfiddle.net/58ddtbm9/

document.querySelector('.contact input, .contact textarea').addEventListener("focusin",  function () {

    this.classList.add('active');;

});

document.querySelector('.contact input, .contact textarea').addEventListener("focusout",  function () {

    this.classList.remove('active');;

});

Answer 1

querySelector 仅返回第一个匹配项，因此您需要 querySelectorAll。 Here是你的 fiddle 的更新版本。

这是修改后的 JavaScript:

var inputs = document.querySelectorAll('.contact input, .contact textarea');

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener('focusin', function() {
        this.classList.add('active');
    });

    inputs[i].addEventListener('focusout', function() {
        this.classList.remove('active');
    });
}