WordPress Divi 主题 jQuery 代码冲突

Question

在 Divi 主题网站上，我有一个 WooCommerce 类别页面，上面有三个按钮，使用以下代码更改 ID 为 #content-area 的 div 的宽度。

 <button id="pixmotebtn1">Set width of div to 479px</button> <button id="pixmotebtn2">Set width of div to 980px</button> <button id="pixmotebtn3">Set width of div to 100%</button>

这些按钮触发以下代码。 该代码可以正常工作并使用 id #content-area 更改 div 的宽度，但它也破坏了 Divi 主题代码。 后端构建器上的模块 + 清除构建器，当此代码处于活动状态时您看不到任何内容。 它还阻止 Divi 的部分加载到前端。

下面与 Divi 的代码有什么冲突？

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#pixmotebtn1").click(function(){ $("#content-area").width(479); }); $("#pixmotebtn2").click(function(){ $("#content-area").width(980); }); $("#pixmotebtn3").click(function(){ $("#content-area").width("%100"); }); }); </script>

Answer 1

需要删除指向 Google jquery 的链接，并且需要将 $ 替换为 jQuery 请参阅将“$”（美元符号）替换为“JQuery”以了解原因。 以下是更改后的工作代码。

按钮代码：

 <button id="pixmotebtn1">Set width of div to 479px</button> <button id="pixmotebtn2">Set width of div to 980px</button> <button id="pixmotebtn3">Set width of div to 100%</button>

JQUERY 代码（放在头部）：

 <script> jQuery(document).ready(function(){ jQuery("#pixmotebtn1").click(function(){ jQuery("#content-area").width(479); }); jQuery("#pixmotebtn2").click(function(){ jQuery("#content-area").width(980); }); jQuery("#pixmotebtn3").click(function(){ jQuery("#content-area").width("100%"); }); }); </script>