在jquery on()中使用for循环的索引值就是给出结束索引

Question

当我在.on("click",function(){})中使用当前for循环值时，实际使用的值是for循环的中断条件值

var arr =["S","d","f"];
for(i=0;i<arr.length;i++)
{
$("#sng"+i).on("click",function(){
console.log(i);  //is always 3
console.log(arr[i]);  //is undefined as array doesnt have index 3 
});

如果阵列具有4个元素，则console.log(i)总是5等。

选择器工作正常，这就是我使用for循环和分配id=sng+i创建div的方式。为什么会发生这种情况，以及我如何使用当前的i值。

我的元素都是动态创建的。

Answer 1

保持i为局部变量无疑是一个很好的前进方向：

var arr =["S","d","f"];
arr.forEach((v,i)=>
{ $("#sng"+i).on("click",function(){
console.log(i);
console.log(v);
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="sng0" href="#">link with s</a><br>
<a id="sng1" href="#">link with d</a><br>
<a id="sng2" href="#">link with f</a><br>
<a id="sng3" href="#">link with k</a>

Answer 2

这是一个作用域问题。无论您单击什么，i都将被读取为全局值。相反，使用事件的值：

var arr = ["S", "d", "f"];
for (i = 0; i < arr.length; i++) {
$("#sng" + i).on("click", function(evt) {
console.log(evt.target)
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sng0">One</button>
<button id="sng1">Two</button>
<button id="sng2">Three</button>

如果您需要原始数组值和索引，则可能需要以某种方式保留它们。.data可以帮助您：

var arr = ["S", "d", "f"];
for (i = 0; i < arr.length; i++) {
$("#sng" + i)
.data('myIndex', i)
.on("click", function() {
console.log(arr[$(this).data('myIndex')])
});
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sng0">One</button>
<button id="sng1">Two</button>
<button id="sng2">Three</button>