如何將jquery轉換為noconflict？

Question

我在 Wordpress 站點上遇到了一個問題，其中主題有一個很大的init.js文件，該文件似乎導致與某些插件發生沖突。

免責聲明，我完全是個菜鳥，但我想我需要將下面的代碼塊轉換為noconflict模式，但我嘗試過的幾件事似乎不起作用。

jQuery(document).ready(function(){

    $ = jQuery;

是否可以將該代碼轉換為無沖突？

Answer 1

您可以使用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>

Answer 2

您還可以非常輕松地創建自己的快捷方式。 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>

如W3schools.com 中所述

Answer 3

您已經在就緒函數之后添加了jQuery.noConflict() ，然后開始您的邏輯。 例子：

jQuery(文檔).ready(函數(){

$ = jQuery;
$.noConflict();

//你的邏輯

});

如何將jquery轉換為noconflict？

問題描述

3 個解決方案

解決方案1
1 2020-01-10 05:49:39

解決方案2
1 2020-01-10 06:02:15

解決方案3
0 2020-01-10 05:52:49

如何將jquery轉換為noconflict？

問題描述

3 個解決方案

解決方案1 1 2020-01-10 05:49:39

解決方案2 1 2020-01-10 06:02:15

解決方案3 0 2020-01-10 05:52:49

解決方案1
1 2020-01-10 05:49:39

解決方案2
1 2020-01-10 06:02:15

解決方案3
0 2020-01-10 05:52:49