关于javascript:for循环点击事件-遇到的问题

11次阅读

共计 567 个字符,预计需要花费 2 分钟才能阅读完成。

起因剖析:
i 会不停的笼罩,只会记录循环最初一次的 i 的赋值,导致永远无奈实现 i 为奇数时的款式扭转。

解决方案:
计划一:将 for 循环改为 forEach 循环,但 forEach 循环针对数组应用,若是节点列表或者对象即不实用。
计划二:将点击事件放到函数用,在 for 循环中仅调用函数实现屡次的调用。函数每次调用会调用一个独立的 i。
计划三:将 for 循环中的 var 换成 let。

var checkboxs = document.querySelectorAll("input[name=check]");
for (var i = 0;i < checkboxs.length;i++){function f (i);
}
function f (i){checkboxs[i].onclick = function(){
        var line = this.parentElement.parentElement;
        // this 在点击事件中代表的 checkboxs[i]
        if(this.checked == true){line.style.backgroundColor = 'darkblue';}else{if(i % 2 == 0){line.style.backgroundColor = 'lightcyan';}else{line.style.backgroundColor = 'lightblue';}
        }
    }
}

正文完
 0