Question

我在创建插件时使用每个插件时有点困惑。我创建了一个简单的插件，其中有一个回调作为测试。

<div>Click me 1</div>
<div>Click me 2</div>

没有每个： -

(function($){    
    $.fn.TestCallBack = function(options){
        var defaults = {
            onClicked :function(){}
        }

        var settings = $.extend({}, defaults, options); 

        function DoSomething(){
            settings.onClicked.call(this);    
        }

        $(this).bind("click", DoSomething);     

        return this;
}
})(jQuery);

$("div").TestCallBack({onClicked:function(){
    console.log($(this).html());
}});

这会产生结果

Click me 1
Click me 2

每个： -

(function ($) {
    $.fn.TestCallBack = function (options) {
        var defaults = {
            onClicked: function () {}
        }

        var settings = $.extend({}, defaults, options);

        function DoSomething() {
            settings.onClicked.call(this);
        }

        this.each(function(){
            $(this).bind("click", DoSomething);
        });        

        return this;
    }
})(jQuery);

$("div").TestCallBack({
    onClicked: function () {
        console.log($(this).html());
    }
});

这会产生结果

Click me 1
Click me 2

我认为使用每个会迭代找到的div，但为什么不使用每个代码提供相同的结果。我在这里显然遗漏了一些东西。有什么想法吗？

Answer 1

你对this做的唯一事情就是调用jQuery的bind。这内部对集合this的所有元素执行该操作。

您需要使用each对所有元素进行迭代，而不是自动应用于该集合的所有项目。

Answer 2

使用each能够遵循返回原始jQuery对象集的jQuery约定，从而实现链接。

您使用each的方式无法实现。它应该像这样使用：

 $.fn.extend({
        TestCallBack : function () {
            return this.each(function () {
                // write your code here
            });
        }
});

现在您可以像这样编码：

$('div').TestCallBack().stop().show(). .....

如果没有each返回，您将无法在原始集合上链接更多jQuery方法。

此处提供更多信息：http://learn.jquery.com/plugins/basic-plugin-creation/

在该页面上向下滚动到以下部分：“使用each（）方法”

为什么在创建jquery插件时使用each

2 个答案: