Question

我正在尝试编写一个简单的jQuery插件，看看它是如何完成的。但我似乎无法同时运行它两次。它基本上是倒计时，它所做的只是获取div中的text（）值并将其计数直到达到1.

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

此调用将函数内的this个变量更改为指向＃box2。这是我的jsfiddle

jQuery插件中this如何变化令人困惑。谢谢你的帮助:)）

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

编写jQuery插件时的范围冲突

1 个答案: