jquery和javascript的关闭

我有下面的代码和javascript的关闭以及匿名函数让我头疼。

for (var i = 0, len = sites.length ; i < len ; i++) { $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); } 

由于关闭，我总是5（sites数组有5个元素），所以所有点击处理程序都引用相同的id。

任何解决方法？

Answer 1

你总是可以用jQuery的each()循环。

 $.each(sites, function(i) { $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); }); 

Answer 2

在你的迭代中使用一个闭包：

 for (var i = 0, len = sites.length ; i < len ; i++) { (function(i) { $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); }(i)); } 

Answer 3

放置一个函数返回一个函数，并在循环外部由i参数化。 无论如何，JSLint会鼓励你这样做，有些人可能会发现它更具可读性。

 function make_fn1(i) { return function() { $("#shader").show(); $("#thumbInfo"+i).show(); }; } function make_fn2(i) { return function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }; } for (var i = 0; i < sites.length ; i++) { $("#thumb"+i).click(make_fn1(i)); $("#thumbInfo"+i+" .xbutton").click(make_fn2(i)); } 

但是，这可以通过其他方式进行清理。 首先，只要你使用jQuery， $("#shader, #thumbInfo"+i).show(); 更简洁。 此外，在当前的代码中，两个函数隐藏或显示相同的两个元素的概念没有被考虑在内，因此可能是

 function make_fn (i,showhide) { return function() { $("#shader, #thumbInfo"+i)[showhide]() }; } for (var i = 0; i < sites.length ; i++) { $("#thumb"+i).click(make_fn(i,'show')); $("#thumbInfo"+i+" .xbutton").click(make_fn(i,'hide')); } 

Answer 4

 var len = sites.length ; for (var i = 0; i < len ; i++) { $("#thumb"+i).click(function() { $("#shader").show(); $("#thumbInfo"+i).show(); alert("#thumbInfo"+i); }); $("#thumbInfo"+i+" .xbutton").click(function() { $("#shader").hide(); $("#thumbInfo"+i).hide(); }); } 

你可能已经给我分配5;