0

重複の可能性:
JavaScript クロージャが正常に機能しない

最初のコードを参照してください。

var count = 0;
(function addLinks() {
    var count = 0; //this count var is increasing

    for (var i = 0, link; i < 5; i++) {
        link = document.createElement("a");
        link.innerHTML = "Link " + i;

        link.onclick = function () {
            count++;
            alert(count);//here all the paragraph updates the same variable
        };

        document.body.appendChild(link);
    }
})();

リンクがクリックされると、カウンター変数はリンク要素ごとに増加し続けます。これはアスペクト化された結果です

2番：

var count = 0;
$("p").each(function () {
    var $thisParagraph = $(this);
    var count = 0; //this count var is increasing too.so what is different between them .They both are declared within the scope in which closure was declared

    $thisParagraph.click(function () {
        count++;
        $thisParagraph.find("span").text('clicks: ' + count);
        $thisParagraph.toggleClass("highlight", count % 3 == 0);
    });
});

ここでは、クロージャー機能がアスペクトとして機能していません。段落要素をクリックするたびに、カウンター var が増加しますが、2 番目の段落要素をクリックしてもその増分は表示されませんか?これの背後にある理由は何ですか?なぜこれが起こっているのですか?カウント段落要素ごとに変数が増加していません。前の質問で満足のいく答えが得られなかったので、要求しました

4

1 に答える 1

4

counter変数はループ内で宣言されています.each。したがって、<p>関数はそれぞれに対して実行されるため、それぞれに独自のカウンターがあります<p>。どの 2 つの段落も同じ変数を更新していません。

一方、最初のスニペットでは、counter(ループの外側で) 使用される変数は 1 つだけで、任意の をクリックすると更新されます<p>。補足として、ループ内で宣言しても違いはないことに注意してください。それぞれに独自のカウンター変数を持たせるには、それぞれのクロージャーを<p>個別に作成する必要があります。<p>

于 2013-02-01T12:18:33.720 に答える