Question

我正在研究JQuery plugin。我对如何使用此jQuery插件感到困惑。如何在插件外部调用jQuery插件函数？

这是我的插件代码：

(function ($) {
    function _setValue(self, value) {
        ....
    }

    //Other functions

    $.fn.inputpicker = function (method) {
        if (!this.length) return this;
        if (typeof method == 'object' || !method) {
            return methods.init.apply(this, arguments);

        }
        else if (methods[method]) {
            return methods[method].apply(this, 
            Array.prototype.slice.call(arguments, 1));
        }
        else { $.error("Method " + method + " does not exist on 
        jQuery.inputpicker"); }
    }

});

您可以找到整个插件here。

现在，如何在自己的代码中使用_setValue函数？

Answer 1

现在，如何在自己的代码中使用_setValue函数？

您可以写：

$('#test').inputpicker('val', 'your string');

调用 inputpicker 实例，然后传递函数和值。

该值必须与 data 属性之一匹配：

$('#test').inputpicker({
    data:[ "Text 1", "Text 2", "Text 3" ],
    autoOpen: true
});
$('button').on('click', function(e) {
    $('#test').inputpicker('val', this.textContent);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ukalpa/inputpicker@master/src/jquery.inputpicker.css">
<script src="https://cdn.jsdelivr.net/gh/ukalpa/inputpicker@master/src/jquery.inputpicker.js"></script>


<input class="form-control" id="test" value="2" />
<button type="button">Text 1</button>
<button type="button">Text 2</button>
<button type="button">Text 3</button>

Answer 2

该函数与插件绑定，其行为类似于对象的私有方法。因此，您不能直接在插件外部访问该功能。

您可以通过编辑插件来解决此问题，例如：

(function( $, document, window ) {

    function _setValue(self, value) {
        ....
    }

    // export the function to the global window object
    window.setValue = _setValue;
    ....

}( jQuery, document, window ));

如何在插件中使用函数

2 个答案: