JQuery и закрытие JavaScript

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 элементов), поэтому всеобработчики щелчков ссылаются на один и тот же идентификатор.

Есть ли обходной путь?

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;