WordPress Divi主题jQuery代码冲突

Question

在一个Divi主题网站上，我有一个内容分类页面，上面有三个按钮，使用下面的代码来更改id为# WooCommerce -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。有关原因，请参阅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>

​