javascript - jQuery 插件未定义，尽管已正确包含在我的 js 代码之前

Question

我已经研究这个相当奇怪的问题好几天了，我真的不明白为什么会发生这种情况。

基本上，环境是WordPress，我包含两个js文件:

vendor.js -> generated by gulp and all it does is concatenating bower libs together

myScript.js -> my code

我所知道的(有证据):

• vendor 文件包含在我的代码之前(从控制台检查)
• 我正在使用的插件包含在vendor.js中(在chrome的新选项卡中打开该文件)
• 两个文件均已正确加载(我打印了一些调试控制台日志，它们位于控制台中)

但是，即使一切看起来都很好，但无论出于何种原因，该插件仍然未定义。我正在使用的插件是这个:https://github.com/idiot/unslider

我在控制台中收到的错误是这样的:

Uncaught ReferenceError: unslider is not defined

这是我调用并需要此插件的代码部分:

jQuery(document).ready(function($) {
  console.log("unslider is ", unslider);
  $('#topBannerSlider').unslider({
    autoplay: true,
    delay: 10000,
    keys: true,
    nav: true,
    arrows: {
      prev: '<a class="unslider-arrow prev fa fa-arrow-circle-left"></a>',
      next: '<a class="unslider-arrow next fa fa-arrow-circle-right"></a>'
    }
  });

  $('#homePageTestimonialsCarousel').unslider({
    autoplay: true,
    delay: 20000,
    keys: true,
    nav: true,
    arrows: false
  });
}

如果我尝试在 jQuery(document).ready() 事件之前加载它，它也会执行相同的操作，如下所示:

console.log("unslider is ", unslider);
jQuery(document).ready(function($) {
  $('#topBannerSlider').unslider({
    autoplay: true,
    delay: 10000,
    keys: true,
    nav: true,
    arrows: {
      prev: '<a class="unslider-arrow prev fa fa-arrow-circle-left"></a>',
      next: '<a class="unslider-arrow next fa fa-arrow-circle-right"></a>'
    }
  });

  $('#homePageTestimonialsCarousel').unslider({
    autoplay: true,
    delay: 20000,
    keys: true,
    nav: true,
    arrows: false
  });
}

你有什么建议吗？我还能尝试什么？还能是什么？我真的很困惑，任何帮助将不胜感激。非常感谢

Answer 1

如果我没听错的话，你说的是 WordPress，所以尝试一下

jQuery 已替换为 $

我以前也遇到过这个问题，现在解决了。

WordPress、PHP、JQuery 和 $ 不能混合使用;)。