0

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

<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

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

4

2 回答 2

3

你唯一要做的this就是在上面调用 jQuery bind。这在内部对 set 的所有元素执行该操作this。

each在对所有元素进行不会自动应用于集合的所有项目的操作时，您需要遍历所有元素。

于 2013-08-02T13:59:12.980 回答
0

您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() 方法”

于 2013-08-02T14:01:43.923 回答