JQ странно присваивает слушатели в цикле или я туплю?

Question

[ThunderCat]

Есть группа чекбоксов, на каждый нужно повесить листенер с функцией скрытия/показа элемента. Таких групп много, по этому возникла идея навесить все одним махом, в цикле при window.onload, тупо проименовав псевдоклассы c окончанием от 1 до n( s1, sport1, s2, sport2...). И понеслась...

for(i=1; i<23; i++){
        $(".s"+i).on("ifUnchecked", function () {
            ctoggler("sport"+i, 0);
            alert(i); //алерт выдает 23 на всех элементах
            });
            $(".s"+i).on("ifChecked", function () {
            ctoggler("sport"+i, 1);
            });
    };

ctoggler() принимает имя класса переключаемого элемента и состояние вкл/выкл (1/0).
По завершении цикла ВСЕМ элементам s1-22 переключение элемента с номером 23.
ИМХО косяк с передачей i в замыкание. Как я понимаю(в жс я не профи), оно берет значение i из текущего состояния на момент вызова евента, которое как раз 23.
Вопрос: Как "зафиксировать" i для текущего евента?

Answer 1

[Sayonji]

Было:

$(".s"+i).on("ifUnchecked", function () {
    ctoggler("sport"+i, 0);
    alert(i);
});
$(".s"+i).on("ifChecked", function () {
    ctoggler("sport"+i, 1);
});

Стало:

$(".s"+i).on("ifUnchecked", function (i) { // <--- аргумент
    ctoggler("sport"+i, 0);
    alert(i);
}.bind(null, i)); // <--- зафиксировали
$(".s"+i).on("ifChecked", function (i) { // <--- аргумент
    ctoggler("sport"+i, 1);
}.bind(null, i)); // <--- зафиксировали

Альтернатива 1, так делают обычно:

(function(i) { // <--- аргумент
    $(".s"+i).on("ifUnchecked", function () {
        ctoggler("sport"+i, 0);
        alert(i);
    });
    $(".s"+i).on("ifChecked", function () {
        ctoggler("sport"+i, 1);
    });
}) (i) // <---- зафиксировали

Альтернатива 2, современный javascript:

for(let i=1; i<23; i++){
    // Код как у вас, let создается в каждой итерации цикла заново,
    // и замыкания работают как надо.
}

Comments

[ThunderCat]

Зашибись! Спасибо, а то я передаю внутрь через аргумент, но про биндить не подумал, оно и ругалось )

[Sayonji]

ThunderCat: Вам еще варианты на выбор.

[ThunderCat]

Sayonji: о, ваще красота )

Answer 2

[abberati]

Классика.

Answer 3

[Stalker_RED]

Еще круче было бы не плодить 23 одинаковых листенера а перевесить его на родительский элемент.

$('myForm').on('ifChecked', '.someClassname', function(){
  console.log(this)
})

Comments

[ThunderCat]

не пойдет, в форме около 200+ чекбоксов, не на все нужно повесить обработчик, + они по группам с разным поведением раскиданы, и не всегда связаны с рядомстоящим или вложенным элементом, чаще элементы разнесены. Проще накинуть на каждый связку.

[Stalker_RED]

ThunderCat: Кстати. у вас нет такой проблемы, что iCheck на таком количестве чекбоксов начинает дико тормозить рендер? Пару лет назад столкнулся с таким, приходилось менять iCheck на fa-иконки с onclick.

[ThunderCat]

Stalker_RED: вроде проблем нет, грузится быстро, не виснет, видимо за пару лет браузеры ушли вперед по оптимизации работы.

[Stalker_RED]

ThunderCat: скорее в iСheck что-то переписали :)