首页 > 解决方案 > 逐个添加点击每个孩子

问题描述

我有一个没有自动滚动的滑块,所以我需要一个 jquery 函数来在滑块上添加自动滚动。这些是滑块指示器,用于更改幻灯片。

<div class="slider__navi">
<a href="#" class="slide-nav" data-slide="1">pikachu</a>
<a href="#" class="slide-nav" data-slide="2">piplup</a>
<a href="#" class="slide-nav" data-slide="3">blaziken</a>
<a href="#" class="slide-nav active" data-slide="4">dialga</a>
</div>

我正在这样做setInterval

setInterval(function(){
for (var i = 1 ; i <= 4; i++) {
$('.slide-nav:nth-child(' + i +')').click();
} 
},1000)

但这不对,我想逐个单击每个幻灯片导航,或者等待一段时间来逐个添加活动类。

标签: jqueryhtmlcss

解决方案


当您全选时,.slide-nav然后在列表的每个项目上单击事件绑定

间隔是错误的方式

改用这个:

    $('.slider__navi').on('click', '.slide-nav', function(){
        var target = $(this).data("slide");
        //do stuff to scroll

        // set active class
        $('.slide-nav').removeClass("active");
        $(this).addClass("active");

        // see target
        console.log(target)
    }); 

推荐阅读