JavaScript 将变量传递给内部单击函数不起作用

Question

我似乎无法弄清楚这一点。它对于 for 循环 的第一部分工作正常，但是随后 var 在我评论过的内部点击函数中丢失了......

另外，可能有一种更简洁的方式来开始编写它:

$(function () {
var a = "rgb(58,88,90)";
var b = "rgb(123,156,158)";
for (var c = 1; c <= 3; c++) {
    if ($("#select" + c).is(":checked")) {
        $("#select" + c + "-icon").css("background", a);
        var d = document.getElementById("select" + c + "_title").innerHTML;
        $("#Selection_" + c).val(d)
    } else {
        $("#select" + c + "-icon").css("background", b);
        $("#Selection_" + c).val("Off")
    }
    $("#select" + c).click(function () {
    // here's where it stops working... var c is no longer recognized...
        if ($("#select" + c).is(":checked")) {
        $("#select" + c + "-icon").css("background", a);
        var d = document.getElementById("select" + c + "_title").innerHTML;
        $("#Selection_" + c).val(d)
    } else {
        $("#select" + c + "-icon").css("background", b);
        $("#Selection_" + c).val("Off")
    }
    })
}
return false });

这是它的第一对目标对象:

<label for="select1"><aside id="select1-icon" class="icon-form right rounded"><img src="../common/images/icon-viewDemo.png" /></aside>
                <input type="checkbox" id="select1" name="select" checked="checked" class="view" /> <h5 id="select1_title">Watch Demo</h5></label>

还有:

<input type="hidden" id="Selection_1" name="Selection_1" value=""/>

Answer 1

您正在捕获循环变量，因此当 for循环结束，变量c值为 4，这是函数执行时看到的值。

var x;
for (var c = 0; c <= 3; c++) {
  x = function() { alert(c); };
}
x();

这将发出警报 4因为当你调用x()时，变量c值为 4 .

如果要捕获c的值您可以为每个函数提供一个单独的副本，而不是变量本身。为了便于阅读，我将处理程序拆分为一个单独的本地函数。

function createClickHandler(c) {
    return function() {
        if ($("#select" + c).is(":checked")) {
            $("#select" + c + "-icon").css("background", a);
            var d = document.getElementById("select" + c + "_title").innerHTML;
            $("#Selection_" + c).val(d)
        } else {
            $("#select" + c + "-icon").css("background", b);
            $("#Selection_" + c).val("Off")
        }
    }
};
$("#select" + c).click(createClickHandler(c));

您可以了解更多有关此现象的信息on this Web page并在 this earlier stackoverflow question .