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

Question

嗨，我知道这个问题之前已经被问过，但这里似乎没有答案对我有帮助。

我有这个 JS block :

$(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');
    });
});

我似乎遇到了这个错误，但我不知道为什么？

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

谢谢

Answer 1

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

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

因此，您的问题的解决方案是将 $ 更改为 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);