javascript 获取未捕获的类型错误:未定义不是 nivo slider.js 中的函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23149688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 00:25:55  来源:igfitidea点击:

Getting Uncaught TypeError: undefined is not a function in nivo slider.js

javascriptjquerydrupalnivo-slider

提问by shashank

I am trying to put nivo-slider on my drupal home page. Although all images are showing but they are not sliding and when I check consol, I see an error in nivo-slider.js file i.e.

我正在尝试将 nivo-slider 放在我的 Drupal 主页上。虽然所有图像都显示但它们没有滑动,当我检查控制台时,我在 nivo-slider.js 文件中看到一个错误,即

"Uncaught TypeError: undefined is not a function"

My nivo-slider.js code is-

我的 nivo-slider.js 代码是-

(function ($) {
  Drupal.behaviors.nivoSlider = {
    attach: function (context, settings) {
      // Initialize the slider
      $('#slider').nivoSlider({ *//here I am getting error mentioned above*
        'effect': Drupal.settings.nivo_slider.effect, // Specify sets like: 'fold,fade,sliceDown'
        'slices': Drupal.settings.nivo_slider.slices, // For slice animations
        'boxCols': Drupal.settings.nivo_slider.boxCols, // For box animations
        'boxRows': Drupal.settings.nivo_slider.boxRows, // For box animations
        'animSpeed': Drupal.settings.nivo_slider.animSpeed, // Slide transition speed
        'pauseTime': Drupal.settings.nivo_slider.pauseTime, // How long each slide will show
        'startSlide': Drupal.settings.nivo_slider.startSlide, // Set starting Slide (0 index)
        'directionNav': Drupal.settings.nivo_slider.directionNav, // Next & Prev navigation
        'directionNavHide': Drupal.settings.nivo_slider.directionNavHide, // Only show on hover
        'controlNav': Drupal.settings.nivo_slider.controlNav, // 1,2,3... navigation
        'controlNavThumbs': Drupal.settings.nivo_slider.controlNavThumbs, // Use thumbnails for Control Nav
        'pauseOnHover': Drupal.settings.nivo_slider.pauseOnHover, // Stop animation while hovering
        'manualAdvance': Drupal.settings.nivo_slider.manualAdvance, // Force manual transitions
        'prevText': Drupal.settings.nivo_slider.prevText, // Prev directionNav text
        'nextText': Drupal.settings.nivo_slider.nextText, // Next directionNav text
        'randomStart': Drupal.settings.nivo_slider.randomStart, // Start on a random slide
        'beforeChange': Drupal.settings.nivo_slider.beforeChange, // Triggers before a slide transition
        'afterChange': Drupal.settings.nivo_slider.afterChange, // Triggers after a slide transition
        'slideshowEnd': Drupal.settings.nivo_slider.slideshowEnd, // Triggers after all slides have been shown
        'lastSlide': Drupal.settings.nivo_slider.lastSlide, // Triggers when last slide is shown
        'afterLoad': Drupal.settings.nivo_slider.afterLoad // Triggers when slider has loaded
      });
    }
  };
}(jQuery));

here is the error in my consol

这是我控制台中的错误

Help me to sought out this error..thanks!!

帮我找出这个错误..谢谢!!

回答by Pratik

Include jquery.js main file in header before any js

在任何 js 之前的头文件中包含 jquery.js 主文件

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

When you use two different versions of jquery (which is not recommended), you can use jQuery.noConflict

当你使用两个不同版本的jquery(不推荐)时,可以使用jQuery.noConflict

 api.jquery.com/jQuery.noConflict/

回答by Amey Mudras

I had encountered a similar problem before. This issue can be fixed by making use of Jquery Update module in Drupal 7 & setting the version of jquery library to 1.9 & above.

我以前遇到过类似的问题。这个问题可以通过使用 Drupal 7 中的 Jquery 更新模块并将 jquery 库的版本设置为 1.9 及更高版本来解决。

Do let me know in case of any doubts

如有任何疑问,请告诉我

回答by Amey Mudras

Also please note that in Drupal you should never add Jquery library explicitly because Drupal core by default adds a jquery library.

另请注意,在 Drupal 中,您永远不应显式添加 Jquery 库,因为 Drupal 核心默认添加了一个 jquery 库。

When you try to add a jquery.js in the head <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

当您尝试在头部添加 jquery.js 时 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

There will be 2 jquery libraries now & which will conflict.

现在将有 2 个 jquery 库,它们会发生冲突。

So we need to use jquery update module to upgrade the library

所以我们需要使用jquery更新模块来升级库

回答by autopoietic

Another likely candidate is referring to jQuery with $ (dollar):

另一个可能的候选人是用 $(美元)指代 jQuery:

  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#main-content").fitVids();
  });

If you instead use the no-conflict reference in your script, as below, this may fix the error

如果您改为在脚本中使用无冲突引用,如下所示,这可能会修复错误

jQuery(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    jQuery("#main-content").fitVids();
  });

回答by paulgv

I just ran into some issues configuring Nivo View Slider on Drupal 7. I didn't read the module's documentation at first but it looks like Nivo Slider's library isn't included in the package, you need to upload it manually to your server. Here is the documentation : https://www.drupal.org/project/views_nivo_sliderTo sum it up :

我刚刚在 Drupal 7 上配置 Nivo View Slider 时遇到了一些问题。起初我没有阅读模块的文档,但看起来 Nivo Slider 的库未包含在包中,您需要手动将其上传到您的服务器。这是文档:https: //www.drupal.org/project/views_nivo_slider总结一下:

  1. install/enable Library API
  2. download Nivo Slider libs from https://github.com/gilbitron/Nivo-Slider/downloads
  3. unzip the archive to sites/all/libraries/nivo-slider
  1. 安装/启用库 API
  2. https://github.com/gilbitron/Nivo-Slider/downloads下载 Nivo Slider 库
  3. 将存档解压缩到站点/所有/库/nivo-slider

At step 2, you'll have to choose between version 2.x or 3.x On the module's project page, it says that version 3.x might be broken on Google Chrome, I didn't have any issue myself...

在第 2 步,您必须在版本 2.x 或 3.x 之间进行选择在模块的项目页面上,它说版本 3.x 在 Google Chrome 上可能已损坏,我自己没有任何问题...