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

Question

我这几天一直在研究这个非常奇怪的问题，我真的不明白为什么会这样。

基本上，环境是WordPress，我包括两个js文件：

vendor.js -> 由 gulp 生成，它所做的只是连接 bower 库一起

myScript.js -> 我的代码

我所知道的（有证据）：

• 供应商文件包含在我的代码之前（从控制台检查）
• 我使用的插件包含在 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 insted of $

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

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