WordPress Divi 主题 jQuery 代码冲突答案

【问题标题】：WordPress Divi Theme jQuery Code ClashingWordPress Divi 主题 jQuery 代码冲突
【发布时间】：2020-10-30 10:49:26
【问题描述】：

在 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>

【问题讨论】：

标签： javascript html jquery wordpress woocommerce

【解决方案1】：

需要删除指向 Google jquery 的链接，并且需要将 $ 替换为 jQuery，请参阅Replace "$"(dollar Sign) with "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 CODE（放在头部）：

<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>

【讨论】：