Question

如果我在同一页面上有多个相同插件的实例，我该如何分离功能。例如。在这个演示版http://jsfiddle.net/3jwAK/中，我有一个插件“editor”，它附加了一个模拟某个插件/小部件按钮的链接，单击此按钮会在textarea后附加一行。

目前的问题是它只针对最后一个textarea

代码看起来像

JS

(function($) {
    $.fn.editor = function(options) {
        var helpers = {
            rand: function() {
                return Math.round(Math.random() * 20);
            }   
        };

        return this.each(function() {
            $this = $(this);

            var div = $("<a>", {
                text: "Add Random Number",
                href: "#",
                click: function() {
                    $this.val( $this.val() + "\n" + helpers.rand() );
                }
            });

            $this.before(div);
        });

    }
})(jQuery);

HTML

<textarea name="txtArea1" cols="50" rows="6" id="editor1"></textarea>

Answer 1

问题是变量$this在每次运行该函数时都需要是本地副本。把var放在它前面。

var $this = $(this);

更新：http://jsfiddle.net/3jwAK/1/

如何隔离同一页面中多个jQuery插件之间的功能

1 个答案: