Тема WordPress Divi jQuery Конфликт кода

Question

На веб-сайте темы Divi у меня есть страница категории WooCommerce с тремя кнопками на ней, используя приведенный ниже код для изменения ширины div с id # content-area.

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

Эти кнопки запускают приведенный ниже код. Код работает правильно и изменяет ширину div с id # content-area, но также нарушает код темы 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>