lightSlider 不是函数，wordpress答案

【问题标题】：lightSlider is not a function, wordpresslightSlider 不是函数，wordpress
【发布时间】：2015-07-21 22:09:30
【问题描述】：

我正在尝试在 WordPress 中添加lightslider(http://sachinchoolur.github.io/lightslider/index.html)，但出现错误

Uncaught TypeError: jQuery(...).lightSlider is not a function(anonymous function) @ (index):99m.Callbacks.j @ jquery.js?ver=1.11.2:2m.Callbacks.k.fireWith @ jquery.js?ver=1.11.2:2m.extend.ready @ jquery.js?ver=1.11.2:2J @ jquery.js?ver=1.11.2:2

我正在尝试他们网站上最简单的示例

HTML

<ul id="lightSlider">
  <li>
      <h3>First Slide</h3>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h3>Second Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
      <h3>Third Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>

</ul>

JavaScript

<script type="text/javascript">
//Also tried to add noConflict() function
//jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#lightSlider").lightSlider(); 

});
</script>

有人可以帮助我吗？谢谢！

【问题讨论】：

听起来好像你在使用之前没有加载插件
您是否也在 html 中包含了这些库？
是的，我检查了 Resources 文件夹中的所有文件，它为插件加载了 .js 和 .css 文件。关于加载，我使用的是 wp_enqueue_script() WordPress 函数，先加载 jQuery，然后再加载 lightslider.js。您知道我该如何以其他方式执行此操作，以确保在使用前加载它吗？
所以在你渲染的html中你可以看到加载脚本的那一行？你得到的错误是因为脚本没有被加载。

标签： javascript jquery wordpress

【解决方案1】：

我解决了问题。存在问题是因为在 lightSlider.js 之后以某种方式加载了 jQuery。我不知道这是怎么发生的，我只是把 jQuery 先加载到 wp_enqueue_script() 中，然后再加载其他任何东西（在 css 之前）和最后的 lightslider.js。

我希望这个答案能帮助更多人。谢谢你的帮助。

【讨论】：

【解决方案2】：

我遇到了同样的问题，但我已经解决了。只需复制整个 lightslider.js 代码并将其粘贴到：

$(document).ready(function(){
   //code of lightslider 

});

【讨论】：

不，我的意思是lightslider.js的代码需要在$(document).ready(function(){ ... });
@CristianPunkRock 有道理。如果您复制.粘贴整个 lightSlider.js 代码并将该 javascript 放在 onready 块中，而不是调用该库，则它可以工作。我因此投了赞成票。

【解决方案3】：

你应该把依赖array('jquery')先加载jQuery。

例子：

  wp_register_script( 'lightslider-js', get_stylesheet_directory_uri() . '/js/vendor/lightSlider/js/lightslider.min.js', array('jquery'), NULL, true );

【讨论】：

【解决方案4】：

添加延迟加载

<script src="js/lightslider.js defer"></script>

【讨论】：