javascript - 编写 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();
}

DEMO 2

---

要让您的插件在 $ 不引用 jQuery ( jQuery.noConflict() ) 的环境中工作，您应该这样做:

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