Question

我正在使用下面的代码，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分配给i;

jquery和javascript关闭

4 个答案: