时间戳

首页 > 解决方案 > WordPress Divi 主题 jQuery 代码冲突

javascript - WordPress Divi 主题 jQuery 代码冲突

问题描述

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

标签： javascripthtmljquerywordpresswoocommerce

解决方案

需要删除指向 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 代码（放在头部）：

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

推荐阅读