本地主机 wordpress 站点上的猫头鹰轮播未捕获类型错误

编程问答 2022-04-23

问题描述

我不知所措，我在其他关于该错误的 stackoverflow 帖子上尝试了多种解决方案，但都没有奏效。我是 JavaScript 新手，不经常使用 wordpress。任何见解都非常感谢！请不要建议在 wordpress 上使用 OWL 插件。 如果还有其他地方我应该放jquer.js的内容（并且没有下面提到的重复导航箭头，请告诉我！！）

我已经尝试过的事情：

  • 放置 jQuery(".owl-carousel").owlCarousel({...});块内的 document.ready 块。这给出了相同的错误，以及额外的错误，并使轮播完全消失。

  • 在functions.PHP中改变入队脚本的顺序 （有时错误会消失，但后来我有两组导航箭头？）

  • 用 jQuery 替换 jquer.js 中的每个 '$'

  • 将jquer.js的内容添加到functions.PHP然后使用 wp_footer 中的 add_action

  • 将 document.ready 更改为 window.load

  • 将 jquer.js 重命名为 owl.carousel.js（并将其所有引用更改为匹配）

来自浏览器控制台的错误：

Uncaught TypeError: jQuery(...).owlCarousel is not a function
    <anonymous> http://localhost/stagingsite/wp-content/themes/strawBerry/assets/js/jquer.js?ver=5.4.6:1
jquer.js:1:25

在我的functions.PHP文件中：

function strawBerry_register()
{
    $version_css = wp_get_theme()->get('Version');
    
    wp_enqueue_style('strawBerry-style',get_template_directory_uri() . "/style.css",array(),$version_css,'all');
    wp_enqueue_script('strawBerry-owl-carousel',get_template_directory_uri() . "/assets/js/owl.carousel.min.js",array( 'jquery' ),false,true);
    wp_enqueue_script('strawBerry-jquery-3.4.1',get_template_directory_uri() . "/assets/js/jquery-3.4.1.min.js",true);
    wp_enqueue_style('strawBerry-owl-min',get_stylesheet_directory_uri() . "/assets/css/owl.carousel.min.css");
    wp_enqueue_style('strawBerry-owl-def',get_stylesheet_directory_uri()  . "/assets/css/owl.theme.default.min.css");
    wp_enqueue_script('strawBerry-jquer',get_template_directory_uri() . "/assets/js/jquer.js",true);
}

add_action('wp_enqueue_scripts','strawBerry_register');

jquer.js：

jQuery(".owl-carousel").owlCarousel({
  loop: true,nav: true,dots: false,autoplay: 5000,stagePadding: 0,autoplayHoverPause: true,margin: 0,responsiveClass: true,responsive: {
    0: {
      items: 2,},768: {
      items: 2,1025: {
      items: 4,});

jQuery(document).ready(function ($) {
  $(".owl-carousel").each(function (index,el) {
    var containerHeight = $(el).height();
    $(el)
      .find("img")
      .each(function (index,img) {
        var w = $(img).prop("naturalWidth");
        var h = $(img).prop("naturalHeight");
        $(img).css({
          width: Math.round((containerHeight * w) / h) + "px",height: containerHeight + "px",});
      }),$(el).owlCarousel({
        autoWidth: true,});
  });
});

与front-page.PHP相关：

  <script src="<?PHP bloginfo('template_directory'); ?>/assets/js/jquery-3.4.1.min.js"></script>
  <script src="<?PHP bloginfo('template_directory'); ?>/assets/js/owl.carousel.min.js"></script>
  <script src="<?PHP bloginfo('template_directory'); ?>/assets/js/jquer.js"></script>

编辑****** 同样在我的functions.PHP文件中，在wp页脚中使用add_action调用：


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptowl-carouselwordpresswordpresswordpress-theming