我在 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建议的。
最佳答案
(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>
您已使用 fn
快捷方式 ( prototype
) 扩展了 jQuery 对象。所以你需要以 jQuery 方法调用你的插件:
$.myPlugin.sayHello();
<小时/>
更新
从我从你的代码中看到的,如果你想调用 sayHello
函数,你需要在某个元素上初始化它,例如:
$( 'body' ).myPlugin();
然后调用你的方法:
$( 'body' )[0].sayHello();
[0]
我们需要因为 this.sayHello = function () {
引用 DOM 元素,而不是 jQuery
关于javascript - 无法找到自定义 jQuery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28454299/