0

私はこれを理解できないようです。for loopの最初のセクションでは正常に動作していますが、その後、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 に答える