主页 / 问题 / 766083
Accepted
pridan
Asked:2020-01-03 19:50:07 +0000 UTC2020-01-03 19:50:07 +0000 UTC

在延迟的循环中添加类[重复]

  • 772

请告诉我如何实现在一个循环中将一个类添加到一个块中。例如，我有几个块，我希望将“当前”类依次添加到每个块中，也就是说，每个块都处于活动状态一段时间，以此类推。

<div id="class-loop">
    <div>
        test1
    </div>
    <div>
        test2
    </div>
    <div>
        test3
    </div>
    <div>
        test4
    </div>
</div>

我试图循环执行它，但它会遍历元素一次并停止。我尝试在 jquery 上不使用循环，但这里出现了一些奇怪的东西。告诉我如何正确操作，我将不胜感激

setInterval(function() {
    $('#class-loop > div:nth-child(1)')
        .addClass('current')
        .next()
        .removeClass('current')
        .end()
        .appendTo('#class-loop');
}, 3000);
.current{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="class-loop">
    <div>
        test1
    </div>
    <div>
        test2
    </div>
    <div>
        test3
    </div>
    <div>
        test4
    </div>
</div>

javascript

2 个回答

  1. jQuery(document).ready(function($) {
  // Устанавливаем класс для первого элемента
  $('#class-loop > div:nth-child(1)').addClass('current');
  
  setInterval(function() {
    // Находим текущий элемент и убираем у него класс
    var cur = $('#class-loop > .current').removeClass('current');
    // Берем следующий элемент
    var next = cur.next();
    if (next.length == 0) {
      // Если следующего не оказалось, то берем первый
      next = cur.parent().children(':first');
    }
    // Устанавливаем найденному элементу нужный класс
    next.addClass('current');
  }, 3000);
});
    .current {
  color: red;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="class-loop">
  <div>
    test1
  </div>
  <div>
    test2
  </div>
  <div>
    test3
  </div>
  <div>
    test4
  </div>
</div>

    • 2
  2. Best Answer

    var $classLoop = $('#class-loop > div'),
  i = 0;
setInterval(function() {
  $classLoop.removeClass('current').filter($classLoop[i]).toggleClass('current');
  i < $classLoop.length - 1 ? i++ : i = 0;
}, 3000);
    .current {
  color: red
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="class-loop">
  <div>test1</div>
  <div>test2</div>
  <div>test3</div>
  <div>test4</div>
</div>

    • 2

相关问题