每个功能仅触发一次

Question

我试图在具有相同类的多个猫头鹰轮播滑块上触发一个函数。 如果我执行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

好吧，我想通了。 @Reinder机智的您说得对，我仅引用第一个滑块的项目，因此我的两个滑块都获得了相同的数据。

我这样做：

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();

现在正在工作。 谢谢你的提示。

Answer 2

您应该像这样准备激活文档中的监听器：

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