猫头鹰旋转木马:无法读取属性'visibleItems'的未定义

Owl Carousel: Cannot read property 'visibleItems' of undefined

本文关键字:未定义 visibleItems 属性 旋转木马 读取 猫头鹰      更新时间:2023-09-26

我不确定这是否是个问题,但我在控制台中收到了这个错误,它让我抓狂,因为我更喜欢在页面上出错。

未捕获的类型错误:无法读取未定义的属性"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;