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>

在jQuery on（）中使用for循环的索引值给出结束索引

2 个答案: