如何在“for”循环中添加“click”处理程序？答案

【问题标题】：How to add a "click" handler inside the "for" loop?如何在“for”循环中添加“click”处理程序？
【发布时间】：2018-11-15 08:34:35
【问题描述】：

有这么一块地方怎么

$(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。这个问题还有其他解决方案吗？谢谢

【问题讨论】：

api.jquery.com/toggle
最简单的解决方案是不使用具有语义含义的 ID。使用 DOM 遍历查找相关的 Sum/Info 字段或将它们与data- 属性配对。

标签： jquery loops for-loop

【解决方案1】：

事实是你引用了一个外部作用域变量。

你可以看看这个问题：Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. What is wrong?

在你的情况下，你可以试试这个代码：

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");
    });
}

【讨论】：

与其说是“外部范围变量”，不如说是点击事件发生在 for 循环完成之后，所以i 的值已经单击时更改。好好阅读：stackoverflow.com/questions/111102/…