Question

您能否告诉我如何为每个.col-md-3添加一个班级，并在连续5秒后将其删除？

＆＃13;

<div class="container">
<div class="row">
  <div class="col-md-3">Mapping</div>
  <div class="col-md-3">Coding</div>
  <div class="col-md-3">Network</div>
  <div class="col-md-3">Application</div>
  </div>
</div>

＆＃13;

body{
  padding:25px;
}
.red{
    color:red
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
setInterval(function(){
   
      $(".col-md-3").each(function(){
         $(this).toggleClass('red')
    });
}, 2000)

＆＃13;

正如你所看到的那样，将这个类添加到所有元素中，但我需要逐个执行此操作

Answer 1

您可以使用以下代码段：

＆＃13;

setInterval(function(){
    var $next = $('.col-md-3.red + .col-md-3').length ? $('.col-md-3.red + .col-md-3') : $('.col-md-3').first(); 
    $('.col-md-3.red').add($next).toggleClass('red')
}, 2000);
$('.col-md-3').first().addClass('red'); // should be set in HTML markup instead

＆＃13;

body{
  padding:25px;
}
.red{
    color:red
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-md-3">Mapping</div>
  <div class="col-md-3">Coding</div>
  <div class="col-md-3">Network</div>
  <div class="col-md-3">Application</div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用setInterval()之类的

＆＃13;

setInterval(function() {
  $curr = $curr.removeClass('red').next();
  if (!$curr.length) {
    $curr = $('.col-md-3').first()
  }
  $curr.addClass('red');
}, 2000);
var $curr = $('.col-md-3').first().addClass('red');

＆＃13;

body {
  padding: 25px;
}
.red {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3">Mapping</div>
    <div class="col-md-3">Coding</div>
    <div class="col-md-3">Network</div>
    <div class="col-md-3">Application</div>
  </div>
</div>

＆＃13;

Answer 3

使用以下解决方案：

setInterval(function () {
    $curr = $curr.removeClass('red').next();
    if (!$curr.length) {
        $curr = $('.col-md-3').first()
    }
    $curr.addClass('red');
}, 5000);
var $curr = $('.col-md-3').first().addClass('red');

请参阅此示例：http://jsfiddle.net/ap4hdkLy/

Answer 4

创建一个找到活动.red类的函数。找到它的索引并添加一个索引。如果它达到.col-md-3个项目的数量或根本找不到，请将下一个索引设置为零。

＆＃13;

function loopClass() {
    var col = $('.row .col-md-3');
    var active = $('.row .red').index();
    var next = 0;
    if( active != -1 && active != ( col.length - 1 ) )
        next = active + 1;
    col.removeClass('red').eq( next ).addClass('red');
}

$(function(){ 
    setInterval( function() { loopClass(); }, 500); 
});

＆＃13;

.red{ color:red }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-3">Mapping</div>
    <div class="col-md-3">Coding</div>
    <div class="col-md-3">Network</div>
    <div class="col-md-3">Application</div>
  </div>
</div>

＆＃13;

关于在一组元素中连续添加和删除类的问题

4 个答案: