編寫jQuery插件時發生範圍衝突

Question

我正在嘗試編寫一個簡單的jQuery插件來查看它的完成情況。但我似乎不能同時運行兩次。它基本上是一個倒計時，它所做的是在一個div獲取文本（）值，直到它達到1

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

此調用轉換功能內都this變量指向＃BOX2指望它了。這是我的jsfiddle

它很容易混淆，如何this在jQuery插件中發生變化。感謝您的幫助:)

Answer 1

您在全局範圍內定義了$this，因此當在第二個元素上調用startCount時，該值將被覆蓋。使用var來使它局部：

var $this = this; 

DEMO

---

而是再次調用該函數的元素，你也可以做這樣的事情：

$.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

---

，並發表您的環境中工作的插件，其中$並不是指jQuery（jQuery.noConflict()），你應該做的：

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