javascript - 变量保持在一个值

Question

我有一个循环，我试图用他们自己的 ID 号进行 onclicks，但它会不断更新到循环中的最后一个数字 - 我想知道如何通过写入变量来阻止它，以便他们保留自己的数字？

这就是我所拥有的：

count = 0;
for(i in my_array){ 
    if(my_array[i][2])){ //if the data value is true
        document.getElementById('div_id_'+count).onclick = function()
        {
            alert(i);
        };
    count++;
    }   
}

事情是 alert(i) 总是显示 my_array 的最后一个值......所以我想知道我怎样才能阻止它每次都写，这样每个 div 都可以解析自己的值？

Answer 1

您遇到了 Closure 的问题。这是一个棘手的话题。看看这个网址：http ://code.google.com/apis/ajax/playground/#closure_for_events

基本上，i当您单击元素时会评估该值；不是在您分配事件时，因此此时i将其设置为循环中的最后一个值。您需要创建一个单独的函数来绑定到带有i参数的 click 事件。一个例子：

function HandleClick(i){
  return function() { alert(i); };
}

count = 0;
for(i in my_array){ 
    if(my_array[i][2])){ //if the data value is true
        document.getElementById('div_id_'+count).onclick = HandleClick(i);
    count++;
    }   
}

现在该HandleClick函数正在为 . 创建自己的闭包i，并将设置为从循环传入的值。

Answer 2

count = 0;
my_array.forEach(function(i) { 
    if(my_array[i][2])){ //if the data value is true
        document.getElementById('div_id_'+count).onclick = function()
        {
            alert(i);
        };
    count++;
    }
});  

如果 my_array 是 Object 而不是 Array

count = 0;
Object.keys(my_array).forEach(function(i) { 
    if(my_array[i][2])){ //if the data value is true
        document.getElementById('div_id_'+count).onclick = function()
        {
            alert(i);
        };
    count++;
    }
});  

Answer 3

将值存储在元素中：

var count = 0;
for (var i in my_array)
{ 
    if (my_array[i][2])) //if the data value is true
    {
        var el = document.getElementById('div_id_'+count);
        el.setAttribute("my_value", i);
        el.onclick = function()
        {
            alert(this.getAttribute("my_value"));
        };
        count++;
    }   
}