我在myPlugin.js中开发了一个jQuery插件,如下所示:
(function ($) {
$.fn.myPlugin = function (options) {
var defaults = {};
var settings = $.extend(defaults, options);
return this.each(function () {
this.sayHello = function () {
alert('Hello!');
};
});
};
})(jQuery);
我从另一个文件call.js调用sayHello()
方法,如下所示:
myPlugin.sayHello();
myPlugin.js和call.js都包含在我的HTML文件中。当编译器到达行myPlugin.sayHello();
时,它会报告错误Uncaught ReferenceError: myPlugin is not defined
。
我的代码有什么问题?
更新
我找到了解决方案。我在我的代码中在一个地方初始化了一个特定元素的插件,例如。 $('#someElement').myPlugin();
。我只需要使用someElement.sayHello();
调用一个插件函数,然后就可以了。
另一种解决方案是@antyrat建议的。
答案 0 :(得分:3)
(function ($) {
$.fn.myPlugin = function (options) {
var defaults = {};
var settings = $.extend(defaults, options);
return this.each(function () {
this.sayHello = function () {
alert('Hello!');
};
});
};
})(jQuery);
$( 'body' ).myPlugin();
console.log($( 'body' ))
$( 'body' )[0].sayHello();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
您使用fn
快捷方式(prototype
)扩展了jQuery对象。所以你需要将你的插件称为jQuery方法:
$.myPlugin.sayHello();
更新
从我的代码中看到,如果你想调用sayHello
函数,你需要在某个元素上初始化它,例如:
$( 'body' ).myPlugin();
然后调用你的方法:
$( 'body' )[0].sayHello();
[0]
我们需要因为this.sayHello = function () {
引用DOM元素而不是jQuery