Как добавить обработчик «click» внутри цикла «for»?

Question

Есть такая штука, где как

$(document).on('click', '#calcA', function() {
    $("#calcASum").addClass("field");
    ($(this).is(":checked")) ? $("#calcAInfo").css("display", "") : $("#calcAInfo").css("display", "none");
});

$(document).on('click', '#calcB', function() {
    $("#calcBSum").addClass("field");
    ($(this).is(":checked")) ? $("#calcBInfo").css("display", "") : $("#calcBInfo").css("display", "none");
});

$(document).on('click', '#calcC', function() {
    $("#calcCSum").addClass("field");
    ($(this).is(":checked")) ? $("#calcCInfo").css("display", "") : $("#calcCInfo").css("display", "none");
});

меняются только AB и C;Я хотел написать через for ()

var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
    $(document).on('click', '#calc'+item[i], function() {
        $("#calc"+item[i]+"Sum").addClass("field");
        ($(this).is(":checked")) ? $("#calc"+item[i]+"Info").css("display", "") : $("#calc"+item[i]+"Info").css("display", "none");
    });
}

, он добавляет еще одну функцию после функции щелчка.Оказывается внутри функции уже i = 3. Есть другие варианты решения этой проблемы?* 1007 спасибо *

Answer 1

Дело в том, что вы ссылаетесь на внешнюю переменную области действия.

Вы можете взглянуть на этот вопрос: Функции, объявленные в циклах, ссылающихся на переменную внешней области действия, могут привести к путанице в семантике.Что не так?

А в вашем случае вы можете попробовать этот код:

var item = ['A', 'B', 'C'];
for(var i=0; i<item.length; i++) {
    const j = i;
    $(document).on('click', '#calc'+item[j], function() {
        $("#calc"+item[j]+"Sum").addClass("field");
        ($(this).is(":checked")) ? $("#calc"+item[j]+"Info").css("display", "") : $("#calc"+item[j]+"Info").css("display", "none");
    });
}