jQuery -在内部点击事件中使用foreach索引

Question

我正在使用AJAX检索1'108项的集合，因此我需要为每个条目创建一个带有特定单击事件的HTML标记。现在ajax成功函数中的代码是:

for (var item in itemCollection){
$("#myContainer").append('<a id="item-'+itemCollection[item].index+'" style="..."></a>'); //Works, creates #index-1, #index-2, ... #index-1108
var itemIndex = itemCollection[item].index;
console.log(itemIndex); //Index OK, logs "1", "2", ... "1108"
$("#item-"+itemCollection[item]).click(function(){ //Click Event OK, it is on the correct tag
    //doSomethingWith(itemIndex);
    console.log(itemIndex); //Index not OK, it is always 1108 wherever I click
});
}

可以看到，click函数使用的itemIndex总是最后一个，所以我想在声明click函数时"捕获"当前的itemIndex，以便在函数中使用它。

Answer 1

itemIndex在循环中被覆盖。

如果想检索每个锚标记的特定信息，可以使用数据属性。

尝试添加data-index="itemCollection[item].index":

$("#myContainer").append('<a data-index="itemCollection[item].index" id="item-'+itemCollection[item].index+'" style="..."></a>');

在点击事件中执行:

$("#item-"+itemCollection[item]).click(function(){ //Click Event OK, it is on the correct tag
    var currIndex = $(this).attr("data-index");
    console.log(currIndex); //Index not OK, it is always 1108 wherever I click
});

Answer 2

use

$("#item-"+itemCollection[item]).click(function(){ 
    console.log(itemCollection[item].index);
});

Answer 3

这是因为你的itemIndex在每次迭代中都会发生变化，如果你想调用itemIndex，你可以试试这个

for (var item in itemCollection){
$("#myContainer").append('<a id="item-'+itemCollection[item].index+'" 
itemIndex = "' + itemCollection[item].index + '"style="..."></a>'); //Works, creates #index-1, #index-2, ... #index-1108

$("#item-"+itemCollection[item]).click(function(){ //Click Event OK, it is on the correct tag
//doSomethingWith(itemIndex);
console.log($(this).attr('itemIndex'));
});

}

Answer 4

一切都与范围有关。如果你把整个click函数包含在一个匿名函数中，你就创建了一个所谓的闭包。

http://jsfiddle.net/nzs20z8j/10/

var itemCollection =  [
        [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
        [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ],        
    ]
for (index in itemCollection){
    $("#myContainer").append('<a id="item-'+index+'" style="" href="#">link' + index +'</a><br/>');     
    (function(){
        var i = index;
        $("#item-" + index).click(function(event){                              
            alert("you clicked link " + i);
        });
    })();    
}