Как сохранить локальные переменные в функциях щелчка jQuery?

Я пытаюсь выяснить, как хранить значения внешних переменных в функциях, созданных во время события click() jQuery. Вот пример кода, с которым я сейчас работаю.

for(var i=0; i<3; i++){
    $('#tmpid'+i).click(function(){
        var gid = i;
        alert(gid);
    });
}

<div id="tmpid0">1al</div>
<div id="tmpid1">asd</div>
<div id="tmpid2">qwe</div>

итак, происходит то, что события прикрепляются правильно, но значение " gid "всегда является последним увеличенным значением "i". Я не уверен, как настроить закрытую переменную в этой ситуации.

11
closures jquery loops variables

5 ответов

вы можете создать закрытие и назначить i к локальной переменной закрытия. The gid переменной будет присвоено значение i в момент создания закрытия, а не при запуске функции.

for(var i=0; i<3; i++){
    (function() {
        var gid = i;
        $('#tmpid'+i).click(function(){
            alert(gid);
        });
    })();
}
23
for(var i=0; i<3; i++){
    $('#tmpid'+i).click((function(gid){
        return function(){
             alert(gid);
        }
    })(i));
}

есть много способов сделать это, это работает и выглядит просто.

редактировать

иначе:

for(var i=0; i<3; i++){
    $('#tmpid'+i).click([i],function(e){
        alert(e.data[0]);
    });
2

вы создали закрытие, где переменная "i"совместно используется несколькими обработчиками кликов.

поскольку Javascript не имеет области блока, вам нужно будет передать " i " новой функции, чтобы она была скопирована по значению в новый экземпляр:

function bindStuff(i) {
    $('#tmpid'+i).click(function(e){
                    var gid = i;
                    alert(gid);
            });
}

for(var i=0; i<3; i++){ bindStuff(i); }

вот еще один подобный вопрос: JavaScript закрытие внутри петли – простой практический пример

1

кроме того, первый аргумент click (или bind) для jQuery-это объект, который присоединяется к событию как данные. 

for(var i=0; i<3; i++){
    $('#tmpid'+i).click({gid : i}, function(e) {
        alert(e.data.gid);
    });
}

Я нахожу это немного более читаемым, чем решение закрытия, но оно сводится к вкусу.

1

Я прочитал резервную копию собственного метода data() jQuery. Я реализовал это, и это тоже работает. Его скрытие некоторых фактических функций того, как обрабатываются закрытия, но его простой и довольно чистый для реализации.

0