从外部调用jQuery插件中的函数

我试图找出如何从插件外部调用我的jQuery插件中的函数。 我试过的代码不起作用。 我确定我必须重新调整我的插件以允许这个，但我不知道该怎么做。 在这个例子中，我试图访问underline()函数。

的jsfiddle

jQuery插件

 (function($) { "use strict"; $.fn.testPlugin = function(options) { // Settings var settings = $.extend({ newText : "Yabadabado" }, options); return this.each(function(i, el) { var init = function(callback) { if( $(el).attr("class") === "red" ) { $(el).css("color","red"); } $(el).text(settings.newText); if( callback && typeof(callback) === "function" ) { callback(); } }; var underline = function() { $(el).addClass("underline"); }; init(); }); }; }(jQuery)); 

将插件分配给选择器

 var doTest = $("#testItem").testPlugin({ newText: "Scoobydoo" }); var doNewTest = $("#newTestItem").testPlugin({ newText: "kapow!" }); 

调用插件中的函数

 $("#underline").click(function(e) { e.preventDefault(); doTest.underline(); }); 

Answer 1

看一下封口 。

这是一个jQuery插件中闭包的基本示例。

 $.fn.plugin = function() { return { helloWorld: function() { console.log('Hello World!'); } } }; // init plugin. var test = $('node').plugin(); // call a method from within the plugin outside of the plugin. test.helloWorld(); 

您可以在以下jsfiddle中看到另一个示例。

http://jsfiddle.net/denniswaltermartinez/DwEFz/

Answer 2

首先，我们需要了解构建jQuery插件的每一步，它就像构建一个javascript插件（类），但我们除了它之外还有一个jQuery类。

 //We start with a function and pass a jQuery class to it as a //parameter $ to avoid the conflict with other javascript //plugins that uses '$ as a name (function($){ //We now append our function to the jQuery namespace, //with an option parameter $.fn.myplugin = function(options) { //the settings parameter will be our private parameter to our function //'myplugin', using jQuery.extend append 'options' to our settings var settings = jQuery.extend({ param:'value', }, options); //Define a reference to our function myplugin which it's //part of jQuery namespace functions, so we can use later //within inside functions var $jquery=this; //Define an output object that will work as a reference //for our function var output={ //Setup our plugin functions as an object elements 'function1':function(param){ //Call jQuery reference that goes through jQuery selector $jquery.each(function(){ //Define a reference of each element of jQuery //selector elements var _this=this; }); //This steps is required if you want to call nested //functions like jQuery. return output; }, //If we want to make our plugin to do a specific operations //when called, we define a function for that 'init':function(){ $jquery.each(function(){ var _this=this; //Note that _this param linked to each jQuery //functions not element, thus wont behave like //jQuery function. //And for that we set a parameter to reference the //jQuery element _this.$this=$(this); //We can define a private function for 'init' //function var privatefun=function(){} privatefun(); //We can now do jQuery stuffs on each element _this.$this.on('click',function(){ //jQuery related stuffs }); }); //We can call whatever function we want or parameter //that belongs to our plugin output.function1("value"); } }; //Our output is ready, if we want our plugin to execute a //function whenever it called we do it now output.init(); //And the final critical step, return our object output to //the plugin return output; }; //Pass the jQuery class so we can use it inside our plugin 'class' })(jQuery); 

现在使用我们的function非常简单

 
 1 2 3 4 
  

简而言之，jQuery插件和任何Javascript插件都只是关于参数范围。

小提琴版https://jsfiddle.net/eiadsamman/a59uwmga/