0

我似乎无法弄清楚这一点。它在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=""/>
4

2 回答 2

2

您正在捕获循环变量，因此当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));

您可以在此 Web 页面和较早的 stackoverflow 问题中了解有关此现象的更多信息。

于 2012-04-14T15:46:18.233 回答
0

c 在全局范围内不存在，因此单击时它不存在。如果您将其设为全局，则单击发生时它不会具有您想要的值。所以使用 eval(); 用它的文字值替换 c ，因此当点击时，你有你想要的值。

$(
    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");
            }
            eval(
                '$("#select"' + c + ').click(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");' +
                    '}' +
                '});'
            );
        }
        return false;
    }
);
于 2012-04-14T15:33:28.223 回答