如何解决本地主机 wordpress 站点上的猫头鹰轮播未捕获类型错误
我不知所措,我在其他关于该错误的 stackoverflow 帖子上尝试了多种解决方案,但都没有奏效。我是 JavaScript 新手,不经常使用 wordpress。任何见解都非常感谢!请不要建议在 wordpress 上使用 OWL 插件。 如果还有其他地方我应该放jquer.js的内容(并且没有下面提到的重复导航箭头,请告诉我!!)
我已经尝试过的事情:
-
放置 jQuery(".owl-carousel").owlCarousel({...});块内的 document.ready 块。这给出了相同的错误,以及额外的错误,并使轮播完全消失。
-
用 jQuery 替换 jquer.js 中的每个 '$'
-
将 document.ready 更改为 window.load
-
将 jquer.js 重命名为 owl.carousel.js(并将其所有引用更改为匹配)
来自浏览器控制台的错误:
Uncaught TypeError: jQuery(...).owlCarousel is not a function
<anonymous> http://localhost/stagingsite/wp-content/themes/strawBerry/assets/js/jquer.js?ver=5.4.6:1
jquer.js:1:25
function strawBerry_register()
{
$version_css = wp_get_theme()->get('Version');
wp_enqueue_style('strawBerry-style',get_template_directory_uri() . "/style.css",array(),$version_css,'all');
wp_enqueue_script('strawBerry-owl-carousel',get_template_directory_uri() . "/assets/js/owl.carousel.min.js",array( 'jquery' ),false,true);
wp_enqueue_script('strawBerry-jquery-3.4.1',get_template_directory_uri() . "/assets/js/jquery-3.4.1.min.js",true);
wp_enqueue_style('strawBerry-owl-min',get_stylesheet_directory_uri() . "/assets/css/owl.carousel.min.css");
wp_enqueue_style('strawBerry-owl-def',get_stylesheet_directory_uri() . "/assets/css/owl.theme.default.min.css");
wp_enqueue_script('strawBerry-jquer',get_template_directory_uri() . "/assets/js/jquer.js",true);
}
add_action('wp_enqueue_scripts','strawBerry_register');
jquer.js:
jQuery(".owl-carousel").owlCarousel({
loop: true,nav: true,dots: false,autoplay: 5000,stagePadding: 0,autoplayHoverPause: true,margin: 0,responsiveClass: true,responsive: {
0: {
items: 2,},768: {
items: 2,1025: {
items: 4,});
jQuery(document).ready(function ($) {
$(".owl-carousel").each(function (index,el) {
var containerHeight = $(el).height();
$(el)
.find("img")
.each(function (index,img) {
var w = $(img).prop("naturalWidth");
var h = $(img).prop("naturalHeight");
$(img).css({
width: Math.round((containerHeight * w) / h) + "px",height: containerHeight + "px",});
}),$(el).owlCarousel({
autoWidth: true,});
});
});
与front-page.PHP相关:
<script src="<?PHP bloginfo('template_directory'); ?>/assets/js/jquery-3.4.1.min.js"></script>
<script src="<?PHP bloginfo('template_directory'); ?>/assets/js/owl.carousel.min.js"></script>
<script src="<?PHP bloginfo('template_directory'); ?>/assets/js/jquer.js"></script>
编辑****** 同样在我的functions.PHP文件中,在wp页脚中使用add_action调用:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。