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

这个更简单的代码怎么样：http://jqversion.com/#!/ndZt3Zz/1

这是你想要的行为吗？

$('.loop-set').change(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');
});

var interval = setInterval(function(){
  $('.loop-set').trigger('change');
}, 1000);

$('.loop-set > div').click(function(){
    clearInterval(interval);
    $('.loop-set > div').removeClass('active');
  $('.' + $(this).attr('class')).addClass('active');
});

Answer 2

尝试

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

演示：Fiddle

Answer 3

如何将onClick更改为以下内容：

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

它的作用是将活动类添加到循环集中，使其所有子项都加粗。单击另一个组时 - 突出显示也会更改。

这是更新的jsfiddle：http://jsfiddle.net/sL95U/5/。希望它有所帮助。

单击停止连续jQuery each（）函数并添加活动类

3 个答案: