无论您单击什么数字，警报都会显示数字10。也许这不是在循环中使用addEventListener的最佳方法。需要一些帮助。谢谢。
<table id="tb1"></table>
<template id="tp1">
<tr>
<td class="num"></td>
</tr>
</template>
<script>
var t = document.getElementById("tp1");
var tb1 = document.getElementById("tb1");
for (i=0;i<10;i++){
var clone = t.content.cloneNode(true);
clone.querySelector(".num").innerHTML = i;
var l = clone.querySelector("tr");
l.id = i;
clone.getElementById(i).addEventListener("click",function(){
alert(i);
});
tb1.append(clone);
}
</script>
该i变量通过引用获取循环的最后一个值。在这种情况下，为10
您可以使用IIFE解决此问题，前提是该函数成为立即执行的函数表达式。表达式中的变量不能从外部访问
代码示例：
var t = document.getElementById('tp1');
var tb1 = document.getElementById('tb1');
for (var i = 0; i < 10; i++) {
var clone = t.content.cloneNode(true);
clone.querySelector('.num').innerHTML = i;
var l = clone.querySelector('tr');
l.id = i;
(function (i) {
clone.getElementById(i).addEventListener('click', function () {
console.log(i);
});
})(i);
tb1.append(clone);
}<table id="tb1"></table>
<template id="tp1">
<tr>
<td class="num"></td>
</tr>
</template>注：我已经取代了使用alert()通过console.log()只是为了方便
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句