每个函数只触发一次

Question

我正在尝试在具有相同 class 的多个 owl-carousel 滑块上触发一个功能。如果我执行 console.log，它会记录两次，但仅适用于第一个滑块。

这是我的函数：

function setActiveItem(){
        var item = $('.owl-item');
        var itemLink = $('.owl-item a');
        var pos = $('.is-active').parent().parent().index();

        $('.slider-mobile').each(function() {
            if($(this).find(itemLink).is('.is-active')) {
                item.removeClass('active');
                $(this).trigger('to.owl.carousel', [pos, 1, true]);
            }
        })
    }

    setActiveItem();

这是我的标记的简化版本：

<ul class="list-container slider-mobile" data-stage-padding-items="200">
    <li class="list-item">
        <a href="#" class="title title--small list-link is-active">item</a>
    </li>
</ul>
<ul class="slider-mobile" data-stage-padding-items="200">
    <li class="list-item">
        <a href="#" class="title title--small list-link is-active">item</a>
    </li>
</ul>

我不确定我是否正确使用了 each() 函数，或者它是否完全符合我的需要。

Answer 1

您应该像这样在文档中激活您的侦听器：

$(document).ready(function(){
   setActiveItem();
});

Answer 2

好的，我明白了。 @Reinder Wit 你是对的，我只引用了第一个滑块的项目，所以我的两个滑块都得到了相同的数据。

我这样做了：

function setActiveItem(){

        $('.slider-mobile').each(function() {
            var item = $(this).find('.owl-item');
            var itemLink = $(this).find('.owl-item a');
            var pos = $(this).find('.is-active').parent().parent().index();

            if($(this).find(itemLink).is('.is-active')) {
                item.removeClass('active');
                $(this).trigger('to.owl.carousel', [pos, 1, true]);
                console.log(pos);
            }
        })
    }

    setActiveItem();

它现在正在运行。谢谢你的线索。

每个函数只触发一次

Each function triggers only once

javascript

each

jquery

owl-carousel