javascript - 单击停止连续的 jQuery each() 函数并添加事件类

Question

我有一个 jQuery each() 函数，它循环遍历一组三个 div，为 div 中的项目添加事件。我可以在单击我的函数时停止循环，但我很难做到这一点，以便当您单击 div 的一个项目时，具有相同类的其他项目保持事件状态。我知道我可以用 if 语句来做到这一点，但我很难弄清楚。

HTML:

<div class="list-items loop-set">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>
<div class="list-items loop-set">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>
<div class="list-items loop-set">
   <div class="one">one</div>
   <div class="two">two</div>
   <div class="three">three</div>
</div>

我的功能:

function doLoop() {
var $one = $('.one');
var $two = $('.two');
var $three = $('.three');

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

$('.loop-set').on('click', '> *', function () {
    var $this = $(this);
    $('.loop-set .active').removeClass('active');
    if ($this == $one) {
        $one.addClass('active');
    } else if ($this == $two) {
        $two.addClass('active');
    } else if ($this == $three) {
        $three.addClass('active');
    }
    clearInterval(interval);
});;
}
doLoop()

我在这个 fiddle 上包含了我的代码.任何帮助/建议将不胜感激!

Answer 1

尝试

$('.loop-set').on('click', '> *', function () {
    var $this = $(this);
    $('.loop-set .active').removeClass('active');
    $('.loop-set .'+this.className).addClass('active');
    clearInterval(interval);
});

演示:Fiddle