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

在创建插件时，我对每个插件的使用都有些困惑。我创建了一个简单的插件与回调作为测试。为什么在创建jquery插件时使用每个插件

<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，但为什么不使用每个代码提供相同的结果。我明显在这里错过了一些东西。有任何想法吗？

来源

2013-08-02 Richard Banks

你做this的唯一的事情是要求它jQuery的bind。这在内部为集合this的所有元素执行该操作。

您需要做的与他们的东西是不会自动应用到设定的所有项目时，遍历所有元素与each。

来源

2013-08-02 13:59:12

感谢。你能举出一些不能自动应用于所有元素的例子吗？ –

jQuery的操作与将它们应用于整个元素集相当一致。但想象一下，你会想要做一些基于如下条件的东西：'if（this.hasClass（'test'））' 当把这个集合作为一个整体对待时，这是行不通的，你必须检查每一个如果它具有该类，则该集合中的项目。 –

您使用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-02 14:01:43 Abhitalks

你的主要观点是关于返回原始设置以允许'方法链接'。这不是OP的主要关注点。尽管你对文档的参考是一个很好的起点。 –

我认为Op的问题与问题标题中提到的一样：“*为什么在创建jQuery插件时使用每个插件*”，所以我解释了“each”的用法以及为什么它不适用于他的场景。 – Abhitalks

是的，但你的主要观点是方法链。为了达到这个目的，你也可以做一个'返回这个;'当你的操作完成时 - 没有每个参与者。使用'each'背后的真正意义在于循环遍历集合中的所有元素，并对所有元素执行插件操作，因为它是处理元素集的非常常见的jQuery方法（即通过'css类选择它们'。 –

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

回答

相关问题