2

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

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

     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 番目の段落要素をクリックしても表示されませんか? これの理由は何ですか？なぜこうなった？count 変数は、段落要素ごとに増加していません。

4

1 に答える 1

2

どういう意味ですか：

var count = 0;
$("p").each(function() {
   var $thisParagraph = $(this);
   //var count = 0; //removed this count, as it re-inits count to 0
   $thisParagraph.click(function() {
   count++;
   $thisParagraph.find("span").text('clicks: ' + count);
   $thisParagraph.toggleClass("highlight", count % 3 == 0);
  });
});
于 2013-02-01T11:43:25.463 に答える