jQueryプラグインの作成中にスコープの衝突が発生しました

Question

jQueryプラグインを作成して、その処理方法を確認しようとしています。しかし、私はそれを2回同時に実行するように見える。その基本的には、カウントダウンし、それがないすべてのdiv要素内のテキスト（）の値を取得し、それが1

$('#box1').startCounter(); 
$('#box2').startCounter(); 

に達するまでをカウントダウンこの呼び出しは、＃1 BOX2を指すように関数内の両方this変数を変更しています。これは私ですjsfiddle

かなり混乱していますか？thisは、jQueryプラグインでどのように変更されましたか？助けてくれてありがとう:)

Answer 1

グローバルスコープで$thisを定義したので、2番目の要素でstartCountが呼び出されると、その値が上書きされます。 varを使用して、それがローカル作るために：

$.fn.startCount = function(count, div) { 
    count = (count) ? count : parseInt($('span.no-display',this).text()); 
    var $target = $('div.counter', this); 

    var run = function() { 
     if (count <= 1) { 
      this.fadeOut().mouseout(); 
     }  
     else { 
      count--; 
      $target.text(count); 
      setTimeout(run, 1000); 
     } 
    }; 
    run(); 
} 

DEMO 2

：

var $this = this; 

DEMO

---

代わりに再び要素を機能を呼び出す、あなたもこのような何かを行うことができます

---

はまた$がjQuery（jQuery.noConflict()）を参照していない環境では、あなたのプラグインを動作させるために、あなたが行う必要があります。

(function($) { 
    $.fn.startCount = ... 
}(jQuery));