Question

我有一个函数，它在类激活的情况下连续循环遍历一组div（见下文）。我正在尝试修改该函数，以便当您单击div时它会停止循环并将该类激活添加到该div。

我已经查看了StackOverflow上的无数个例子，但是找不到适合我情况的东西。

我正在尝试修改的功能：

function doLoop() {
    $('.cd-types, .img-frame, .img-content-container').each(function(){
        (function($set){
            setInterval(function(){
                var $cur = $set.find('.active').removeClass('active');
                var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
                $next.addClass('active');
            },7000);
        })($(this));   
    });
}

我试图修改循环，这是jfiddle。我知道它相当简单，我花了最后几个小时试图搞清楚。任何建议/方向将不胜感激。

Answer 1

尝试

function doLoop() {
    $('.cd-types, .img-frame, .img-content-container, .list-items').each(function () {
        var $set = $(this);
        var interval = setInterval(function () {
            var $cur = $set.find('.active').removeClass('active');
            var $next = $cur.next().length ? $cur.next() : $set.children().eq(0);
            $next.addClass('active');
        }, 1000);
        $set.data('loop', interval);

        $set.on('click', '> *', function () {
            $(this).addClass('active').siblings('.active').removeClass('active');
            clearInterval($set.data('loop'));
            $set.removeData('loop')
        });
    });
}

演示：Fiddle，Fiddle2

Answer 2

稍微简化循环功能以使用＆＃34; self＆＃34;变量技巧。

timerID用于跟踪setInterval（）调用，以便在单击时使用clearInterval（）调用它可以停止：

$('.list-items').children().first().addClass('active');

var timerID;

$('.list-items').each(function () {
    var self = this;
    timerID = setInterval(function () {
        var $cur = $(self).find('.active').removeClass('active');
        var $next = $cur.next().length ? $cur.next() : $(self).children().eq(0);
        $next.addClass('active');
    }, 1000);
});

$('.list-items').on('click', function(){
    clearInterval(timerID);  
    alert("Stopped");
});

请参阅以下工作代码：

JSFiddle

在添加类时单击时停止jquery循环函数

2 个答案: