猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
Owl Carousel: Cannot read property 'visibleItems' of undefined
我不确定这是否是个问题,但我在控制台中收到了这个错误,它让我抓狂,因为我更喜欢在页面上出错。
未捕获的类型错误:无法读取未定义的属性"visibleItems"。它指向这行代码:var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
我创建了一个JSFiddle来复制这一点:http://jsfiddle.net/j2esf0bn/3/
<div id="main_image">
<div id="sync1" class="owl-carousel owl-theme"></div>
</div>
<div id="product_thumbnails">
<div id="sync2" class="owl-carousel owl-theme"></div>
</div>
<script>
jQuery(document).ready(function () {
var sync1 = jQuery("#sync1");
var sync2 = jQuery("#sync2");
sync1.owlCarousel({
jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
jsonSuccess: customDataSuccess1,
singleItem: true,
slideSpeed: 1000,
pagination: true,
navigation: true,
navigationText: ["<i class='fa fa-chevron-left fa-2x'></i>", "<i class='fa fa-chevron-right fa-2x'></i>"],
afterAction: syncPosition,
responsiveRefreshRate: 200,
rewindNav: false,
lazyLoad: true
});
sync2.owlCarousel({
jsonPath: 'https://dl.dropboxusercontent.com/u/71195383/customData.json',
jsonSuccess: customDataSuccess2,
items: 5,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
itemsTablet: [768, 5],
itemsMobile: [479, 4],
navigation: true,
navigationText: ["<i class='fa fa-chevron-left fa-2x'></i>", "<i class='fa fa-chevron-right fa-2x'></i>"],
pagination: false,
rewindNav: false,
slideSpeed: 1000,
responsiveRefreshRate: 100,
afterInit: function (el) {
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el) {
var current = this.currentItem;
jQuery("#sync2")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced");
if (jQuery("#sync2").data("owlCarousel") !== undefined) {
center(current);
}
}
jQuery("#sync2").on("click", ".owl-item", function (e) {
e.preventDefault();
var number = jQuery(this).data("owlItem");
sync1.trigger("owl.goTo", number);
});
function center(number) {
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for (var i in sync2visible) {
if (num === sync2visible[i]) {
var found = true;
}
}
if (found === false) {
if (num > sync2visible[sync2visible.length - 1]) {
sync2.trigger("owl.goTo", num - sync2visible.length + 2);
} else {
if (num - 1 === -1) {
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if (num === sync2visible[sync2visible.length - 1]) {
sync2.trigger("owl.goTo", sync2visible[1]);
} else if (num === sync2visible[0]) {
sync2.trigger("owl.goTo", num - 1);
}
}
function customDataSuccess1(data) {
var content = "";
for (var i in data["items"]) {
var img = data["items"][i].img;
var alt = data["items"][i].alt;
content += "<img class='"lazyOwl'" data-src='"http://owlgraphic.com/owlcarousel/demos/" + img + "'" alt='"" + alt + "'">";
}
jQuery("#sync1").html(content);
}
function customDataSuccess2(data) {
var content = "";
for (var i in data["items"]) {
var img = data["items"][i].img;
var alt = data["items"][i].alt;
if (data["thumbnails"] === true) {
img = img.replace(".jpg", '-th.jpg');
}
content += "<img src='"http://owlgraphic.com/owlcarousel/demos/" + img + "'" alt='"" + alt + "'">";
}
jQuery("#sync2").html(content);
}
});
</script>
我不知道如何解释或修复这个错误。我在网上搜索过,但找不到任何能回答我问题的东西。
感谢您的帮助!
编辑
所有试图解决此错误的尝试都会导致其他错误。
加载页面时,该错误只在控制台中显示一次。页面加载后,转盘按预期运行。
因此,最后,我不会让这个错误进一步困扰我,只是在查看这个特定页面上的控制台日志时尝试忽略它但是,如果有人找到了修复此错误的方法,请毫不犹豫地发布您的答案。
该错误似乎与使用JSON以及同步旋转木马有关。
在调用猫头鹰转盘上的数据属性之前,元素似乎没有及时呈现。我还更改了收集可见项目的方式。
var sync2visible = sync2.data().owlCarousel.owl.visibleItems;
看看这把小提琴,它对你有用吗?
http://jsfiddle.net/j2esf0bn/5/
AFAIK,转盘不需要立即获得这些信息。我用一个简单的if语句修复了控制台错误,并从更改了行
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
至
var sync2visible = false;
if (typeof sync2.data("owlCarousel").owl != 'undefined')
sync2visible = sync2.data("owlCarousel").owl.visibleItems;
相关文章:
- 为什么“;未定义的“;在JavaScript中结束循环
- 要求未定义JS回调参数
- 如何检查管道中未定义的项目
- TypeError:无法读取属性'推'未定义的JavaScript
- $window.ga在AngularJS事件中未定义
- 未捕获的TypeError无法读取未定义的属性socialsharing
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 无法获取属性'selectedIndex'的未定义引用或null引用
- 如何消除代码中的未定义和其他问题
- 未捕获的ReferenceError:$未定义
- this.router在AngularJS 2中未定义
- 未捕获的类型错误:无法读取属性'删除'的未定义
- 节点fs.stat名称未定义
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- Jquery未定义函数正在停止其他操作
- AngularJS指令出错-无法读取属性'编译'的未定义
- 这.SOMETHING 总是返回未定义的 - extjs
- 无法获取属性'Id'使用Knockout.js的未定义或空引用API
- Wordpress中带有JQuery Accordion的未定义匿名函数
- 在不破坏未定义函数的情况下,对多个视图使用单个js文件