未捕获的TypeError:$(...).ready不是函数

未捕获的TypeError:$(...).ready不是函数

问题描述:

我知道这已经被问过了,但是这里没有答案似乎对我有帮助.

Hi I Know this has been asked before but no answer on here seems to help me.

我有这块JS:

$(document).ready(function() {
    $('.play-icon-hover').hover(function() {
         $('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
        }, function() {
         $('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
    });
});

我似乎收到此错误,但我不知道为什么?

And I seem to be getting this error but I have no idea why?

Uncaught TypeError: $(...).ready is not a function

谢谢

您正在使用 Prototype.js jQuery.js .如果您想使用jQuery,最好将代码封装在IIFE中,如下所示:

You are using Prototype.js as well as jQuery.js. If you wanna use jQuery, it is better to encapsulate your code inside an IIFE like this:

(function ($) {
  // jQuery code using $
})(jQuery);

因此,解决此问题的方法是将 $ 更改为jQuery:

So the solution for your issue is either you change $ to jQuery:

jQuery(document).ready(function() {
  jQuery('.play-icon-hover').hover(function() {
    jQuery('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
  }, function() {
    jQuery('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
  });
});

或者,使用IIFE:

(function ($) {
  $(document).ready(function() {
    $('.play-icon-hover').hover(function() {
      $('.cms-model-banner-overlay').addClass('.cms-model-banner-overlay-active');
    }, function() {
      $('.cms-model-banner-overlay').removeClass('.cms-model-banner-overlay-active');
    });
  });
})(jQuery);