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>