在focusin上将类添加到父级

Question

我想将类名有效添加到<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是您小提琴的更新版本。

这是经过修改的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');
    });
}

Answer 2

您必须使用querySelectorAll然后遍历每个结果并向每个元素添加一个事件。 querySelector仅返回第一场比赛。