[英]How to convert jquery into noconflict?
我在 Wordpress 站点上遇到了一个问题,其中主题有一个很大的init.js
文件,该文件似乎导致与某些插件发生冲突。
免责声明,我完全是个菜鸟,但我想我需要将下面的代码块转换为noconflict
模式,但我尝试过的几件事似乎不起作用。
jQuery(document).ready(function(){
$ = jQuery;
是否可以将该代码转换为无冲突?
您可以使用IIFE来做到这一点:
(function ($) { console.log(typeof $); $(document).ready(function () { console.log($('body')[0]); }); })(typeof $ === 'function' ? $ : jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
如果你使用 webpack,你可能需要先检查全局对象:
(function (global, factory) { factory(typeof global.$ === 'function' ? global.$ : global.jQuery); })(typeof window === 'object' ? window : this, function ($) { console.log(typeof $); $(document).ready(function () { console.log($('body')[0]); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
您还可以非常轻松地创建自己的快捷方式。 noConflict() 方法返回对 jQuery 的引用,您可以将其保存在变量中,以备后用。
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery is still working!"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <button>Test jQuery</button> </body> </html>
您已经在就绪函数之后添加了jQuery.noConflict()
,然后开始您的逻辑。 例子:
jQuery(文档).ready(函数(){
$ = jQuery;
$.noConflict();
//你的逻辑
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.