問題描述

我正在嘗試研究如何從插件外部調用我的 jQuery 插件中的函數.我嘗試過的代碼不起作用.我確定我將不得不重組我的插件以允許這樣做，但我不確定如何去做.在這個例子中，我試圖訪問 underline() 函數.

I am trying to work out how to call functions within my jQuery plugin from outside the plugin. The code I have tried is not working. I'm sure I will have to restructure my plugin to allow this, but I'm not sure how to. In this example, I'm trying to access the underline() function.

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();
});

推薦答案

看看 關閉.

這是一個基本示例，說明 jQuery 插件中的閉包.

Here is a basic example of what a closure looks like in a jQuery plugin.

$.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 看到另一個例子.

You can see another example at the following jsfiddle.

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

這篇關于從外部調用 jQuery 插件內部的函數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！