Javascript 使用owl-filter.js过滤owl转盘项目

我正在使用这个插件来过滤我的

但它不工作，我有各种控制台错误，这是当前的一个： “未捕获引用错误：未定义initOwlEvent”

我在页面的页脚中添加了jquery.owl-filter.js，下面是使用此脚本标记调用的插件：

<script>
    $(function() {
    /* animate filter */
        var owlAnimateFilter = function(even) {
            $(this)
            .addClass('__loading')
            .delay(70 * $(this).parent().index())
            .queue(function() {
                $(this).dequeue().removeClass('__loading')
            })
        }

        $('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
            var filter_data = $(this).data('filter');

            /* return if current */
            if($(this).hasClass('btn-active')) return;

            /* active current */
            $(this).addClass('btn-active').siblings().removeClass('btn-active');

            /* Filter */
            initOwlEvent.owlFilter(filter_data, function(_owl) { 
                $(_owl).find('.item').each(owlAnimateFilter); 
            });
        })
    })
    </script>

我的HTML

<div class="row parallax-counter-v4 parallaxBg" id="row_events">
  <div class="content container">
    <h2 class="title-v2 title-center">Events</h2>
    <div id="filter-container" class="btn-filter-wrap cbp-1-filters-text">
      <div data-filter=".event-1" class="btn-filter cbp-filter-item">Main Events</div> |
      <div data-filter=".event-2" class="btn-filter cbp-filter-item">The Venue</div> |
      <div data-filter=".event-3" class="btn-filter cbp-filter-item">Woodys</div> |
      <div data-filter=".event-4" class="btn-filter cbp-filter-item">Activities</div>
    </div>
    <div class="owl-carousel-v1 owl-work-v1 margin-bottom-50 mobile-margin-bottom-10">
      <div class="owl-events">
        {exp:su_event:homepage limit="8"} {events}

        <div class="item news-v2 cbp-item event-{venue_id}">
          <div class="news-v2-badge">
            {if thumbnail_url == ""}
            <a href="/events/id/{event_id}-{url_name}">
              <img alt="" class="img-responsive lazyOwl" src="" />
            </a>
            {if:else}
            <a href="/events/id/{event_id}-{url_name}">
              <img alt="" class="img-responsive lazyOwl" src="{thumbnail_url}" />
            </a>
            {/if}
            <p>
              <span>{start_date format="%d"}</span>
              <small>{start_date format="%M"}</small>
            </p>
          </div>
          <h4><a href="/events/id/{event_id}-{url_name}">{title}</a></h4>
          <p>{description}</p>
        </div>

        {/events} {/exp:su_event:homepage}
      </div>
    </div>
  </div>
</div>

事件
主要事件|
场地|
伍迪|
活动
{exp:su_event:homepage limit=“8”}{events}
{如果缩略图\u url==“”}
{if:else}
{/if}

{开始日期格式=“%d”}
{start_date format=“%M”}

{说明}

{/events}{/exp:su_event:homepage}

我在使用WordPress主题时遇到了类似的问题。Owl主题显示了与您提到的相同的错误。我在标题处添加了jquery，问题得到了解决。我不确定这是否适用于您，但您可以试一试。另外，检查jquery之后是否包含owl脚本文件。

对我来说，它正在工作

$(function() {


    $.fn.owlRemoveItem = function(num) {
        var owl_data = $(this).data('owlCarousel');

        owl_data._items = $.map(owl_data._items, function(data, index) {
            if (index != num) return data;
        })

        $(this).find('.owl-item').eq(num).remove();
    }

    $.fn.owlFilter = function(data, callback) {
        var owl = this,
            owl_data = $(owl).data('owlCarousel'),

            $elemCopy = $('<div>').css('display', 'none');

        /* check attr owl-clone exist */
        if (typeof($(owl).data('owl-clone')) == 'undefined') {
            $(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
            $(owl).data('owl-clone', $elemCopy);
        } else {
            $elemCopy = $(owl).data('owl-clone');
        }

        /* clear content */
        owl.trigger('replace.owl.carousel', ['<div/>']);

        switch (data) {
            case '*':
                $elemCopy.children().each(function() {
                    owl.trigger('add.owl.carousel', [$(this).clone()]);
                })
                break;
            default:
                $elemCopy.find(data).each(function() {

                    owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
                })
                break;
        }


        /* remove item empty when clear */
        owl.owlRemoveItem(0);
        owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);

        // callback
        if (callback) callback.call(this, owl);
    }

    var owl = $('.owl-carousel').owlCarousel({
        autoplay: false,
        nav: true,
        loop: false,
        items: 3,
        autoplayHoverPause: true,
        lazyLoad: true,
        margin: 10,
        responsiveClass: true,
        navText : ["",""],
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: true
            },
            1000: {
                items: 3,
                nav: true,

            }
        },


    });




    /* animate filter */
    var owlAnimateFilter = function(even) {
        $(this)
            .addClass('__loading')
            .delay(70 * $(this).parent().index())
            .queue(function() {
                $(this).dequeue().removeClass('__loading')
            })
    }

    $('.btn-filter-wrap').on('click', '.btn-filter', function(e) {

       console.log('ddd');
        var filter_data = $(this).data('filter');

        /* return if current */
        if ($(this).hasClass('btn-active')) return;

        /* active current */
        $(this).addClass('btn-active').siblings().removeClass('btn-active');

        /* Filter */
        owl.owlFilter(filter_data, function(_owl) {
            $(_owl).find('.item').each(owlAnimateFilter);
        });
    })


})

$（函数（）{
$.fn.owlRemoveItem=函数（num）{
var owl_data=$（this.data（'owlCarousel'）；
owl_数据。_项=$.map（owl_数据。_项，函数（数据，索引）{
if（index！=num）返回数据；
})
$（this.find（'.owl item'）.eq（num.remove（）；
}
$.fn.owlFilter=函数（数据，回调）{
var owl=这个，
owl_data=$（owl.data（'owlCarousel'），
$elemCopy=$（''）.css（'display'，'none'）；
/*检查attr owl克隆是否存在*/
if（typeof（$（owl.data（'owl-clone'））=“未定义”）{
$（owl）.find（'.owl项：未（.clone））.clone（）.appendTo（$elemCopy）；
$（owl）.data（'owl-clone'，$elemCopy）；
}否则{
$elemCopy=$（owl.data（'owl-clone'）；
}
/*清晰内容*/
触发器（'replace.owl.carousel'，[''）；
交换机（数据）{
案例“*”：
$elemCopy.children（）.each（函数（））{
trigger（'add.owl.carousel'，[$（this.clone（）]）；
})
打破
违约：
$elemCopy.find（数据）.each（函数（）{
触发器（'add.owl.carousel'，[$（this.parent（）.clone（）]）；
})
打破
}
/*清除时删除空项*/
owl.owlRemoveItem（0）；
触发器（'refresh.owl.carousel'）.trigger（'to.owl.carousel'，[0]）；
//回拨
if（callback）callback.call（this，owl）；
}
var owl=$（'.owl carousel'）.owlCarousel({
自动播放：错误，
导航：是的，
循环：false，
项目：3，
自动播放暂停：对，
懒汉：没错，
差额：10，
回答：是的，
导航文本：[“”，“”]，
响应：{
0: {
项目：1，
导航：对
},
600: {
项目：3，
导航：对
},
1000: {
项目：3，
导航：是的，
}
},
});
/*动画过滤器*/
var owlAnimateFilter=函数（偶数）{
$（本）
.addClass（“加载”）
.delay（70*$（this）.parent（）.index（））
.queue（函数（）{
$（this.dequeue（）.removeClass（“”\u加载“）
})
}
$（'.btn filter wrap'）。在（'click'，'.btn filter'，函数（e）上{
console.log（'ddd'）；
var filter_data=$（this.data（'filter'）；
/*返回当前值*/
if（$（this）.hasClass（'btn-active'））返回；
/*有功电流*/
$（this）.addClass（'btn-active'）.sides（）.removeClass（'btn-active'）；
/*滤器*/
owlFilter（过滤数据，函数（\uowl）{
$（_owl）.find（'.item'）.each（owlAnimateFilter）；
});
})
})

根据最初的演示页面，它调用的是“owl”而不是“initOwlEvent”，而“owl”是一个在脚本的变量范围中较早声明的变量，并设置为$（…）的值。在脚本中，“initOwlEvent”似乎没有使用$（…）.owlCarousel（…）的值，事实上“initOwlEvent”未在正确的变量范围内声明，或在要查看的变量范围内更早声明，因为您遇到了“未定义”错误。

$(function() {


    $.fn.owlRemoveItem = function(num) {
        var owl_data = $(this).data('owlCarousel');

        owl_data._items = $.map(owl_data._items, function(data, index) {
            if (index != num) return data;
        })

        $(this).find('.owl-item').eq(num).remove();
    }

    $.fn.owlFilter = function(data, callback) {
        var owl = this,
            owl_data = $(owl).data('owlCarousel'),

            $elemCopy = $('<div>').css('display', 'none');

        /* check attr owl-clone exist */
        if (typeof($(owl).data('owl-clone')) == 'undefined') {
            $(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
            $(owl).data('owl-clone', $elemCopy);
        } else {
            $elemCopy = $(owl).data('owl-clone');
        }

        /* clear content */
        owl.trigger('replace.owl.carousel', ['<div/>']);

        switch (data) {
            case '*':
                $elemCopy.children().each(function() {
                    owl.trigger('add.owl.carousel', [$(this).clone()]);
                })
                break;
            default:
                $elemCopy.find(data).each(function() {

                    owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
                })
                break;
        }


        /* remove item empty when clear */
        owl.owlRemoveItem(0);
        owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);

        // callback
        if (callback) callback.call(this, owl);
    }

    var owl = $('.owl-carousel').owlCarousel({
        autoplay: false,
        nav: true,
        loop: false,
        items: 3,
        autoplayHoverPause: true,
        lazyLoad: true,
        margin: 10,
        responsiveClass: true,
        navText : ["",""],
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: true
            },
            1000: {
                items: 3,
                nav: true,

            }
        },


    });




    /* animate filter */
    var owlAnimateFilter = function(even) {
        $(this)
            .addClass('__loading')
            .delay(70 * $(this).parent().index())
            .queue(function() {
                $(this).dequeue().removeClass('__loading')
            })
    }

    $('.btn-filter-wrap').on('click', '.btn-filter', function(e) {

       console.log('ddd');
        var filter_data = $(this).data('filter');

        /* return if current */
        if ($(this).hasClass('btn-active')) return;

        /* active current */
        $(this).addClass('btn-active').siblings().removeClass('btn-active');

        /* Filter */
        owl.owlFilter(filter_data, function(_owl) {
            $(_owl).find('.item').each(owlAnimateFilter);
        });
    })


})