编写jQuery插件时发生范围冲突

Question

我正在尝试编写一个简单的jQuery插件，以了解其效果。 但是我似乎无法同时运行两次。 它基本上是递减计数，它所做的就是在div中获取text（）值并将其递减计数直至达到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();
}

演示2

---

为了使您的插件在$不引用jQuery （ jQuery.noConflict() ）的环境中工作，您应该这样做：

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