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

每个功能仅触发一次

2 个答案: