Question

如果元素被填充，我希望网站更改元素的类。因此，当用户+----------+--------------+----------+----------+ | ADDRESS | midl | UL_ID | P | +----------+--------------+----------+----------+ | CESTA 10 | 17097687x001 | 17097687 | CESTA 10 | | CESTA 10 | 17097687x002 | 17097687 | CESTA 10 | | CESTA 10 | 17097687x003 | 17097687 | CESTA 10 | | CESTA 10 | 17097687x004 | 17097687 | CESTA 10 | | ULICA 25 | 14037390x001 | 14037390 | ULICA 25 | | ULICA 6 | 14044272x001 | 14044272 | ULICA 6 | | ULICA 6 | 14044272x002 | 14044272 | ULICA 6 | | ULICA 6 | 14044272x003 | 14044272 | ULICA 6 | | ULICA 6A | 14044264x001 | 14044264 | ULICA 6A | | ULICA 7 | 14044299x001 | 14044299 | ULICA 7 | +----------+--------------+----------+----------+ 10 rows in set (0.02 sec)退出输入字段时，程序会检查它是否具有任何值，如果是，则添加一个类。问题是将此行为传递给类'集合中的每个元素。

blur

在重新加载页面后（如果缓存中有任何内容），这个工作一次，但每次离开焦点时都会触发var input = document.getElementsByClassName('input'); contentCheck = function(i){ if(input[i].value>0) input[i].classList.add('filled'); else input[i].classList.remove('filled'); }; for(var i=0; i<input.length; i++) { input[i].addEventListener('blur',contentCheck(i)); }。

Answer 1

你已经半价适用了＆＃34; closures in loops＆＃34;该代码的解决方案，但您不需要在循环解决方案中使用闭包，只需在this中使用contentCheck并将 it 指定为处理程序（而不是调用它）并使用其返回值作为处理程序）：

var input = document.getElementsByClassName('input');
var contentCheck = function(){ // <== No `i` argument (and note the `var`)
    // Use `this` here
    if(this.value>0) this.classList.add('filled');
    else this.classList.remove('filled');
};
for(var i=0; i<input.length; i++) {
    input[i].addEventListener('blur',contentCheck);
    // No () here -------------------------------------^
}

旁注：classList有一个方便的toggle函数，它带有一个可选的标记：

var contentCheck = function(){
    this.classList.toggle('filled', this.value > 0);
};

如果你需要在循环中关闭＆＃34;关闭＆＃34;解决方案（再次，你不是，但为了完整性），你有contentCheck 返回一个执行检查的功能：

var input = document.getElementsByClassName('input');
var makeContentCheckHandler  = function(i){
    return function() {
        if(input[i].value>0) input[i].classList.add('filled');
        else input[i].classList.remove('filled');
    };
};
for(var i=0; i<input.length; i++) {
    input[i].addEventListener('blur', makeContentCheckHandler(i));
}

注意我更改了名称，以明确它的作用。

Answer 2

尝试使用匿名函数

input[i].addEventListener('blur',function(e){
 console.log(e);
});

示例：https://jsfiddle.net/42etb4st/4/

每个对象的触发事件

2 个答案: