在编写jQuery插件时发生作用域冲突

scope collision while writing a jQuery plugin

本文关键字：作用域 冲突 插件 jQuery      更新时间：2023-09-26

我正试图写一个简单的jQuery插件，只是看看它是如何完成的。但我似乎不能同时运行两次。它基本上是一个倒数，它所做的就是获取div中的text()值然后倒数直到它达到1。

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

这个调用将函数内的两个this变量都指向#box2。这是我的文件

在一个jQuery插件中this是如何改变的，这很令人困惑。谢谢你的帮助:)

您在全局作用域中定义了$this，因此当在第二个元素上调用startCount时，该值将被覆盖。使用var将其设置为本地:

var $this = this;

除了在元素中再次调用函数之外，您还可以这样做:

$.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));
相关文章：