Question

我一直在努力解决以下问题：一组5个类需要一个接一个地改变颜色，间隔为2秒。现在我知道我必须使用.each（）但是我找不到任何地方如何正确循环我的div。它们都有类圈，如下所示：

        <div data-text="I've" id="circle1" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="got" id="circle2" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="some" id="circle3" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="stuff" id="circle4" class="circle">
            <h1>  </h1>
        </div>

        <div data-text="toDo" id="circle5" class="circle">
            <h1>  </h1>
        </div>

所以我得到了间隔，这不是一个真正的问题。但是现在我一直坚持让循环工作：

var circle = $(".circle");



circle.each(function(){

setInterval(function(){ 
 $('.circle').toggleClass('yellow');  
    setTimeout(function(){
    $('.circle').toggleClass('yellow');  
 },2000)
 },4000);
 });

我真的很感激这方面的一些帮助。我提前谢谢了！

Answer 1

我认为你真的不需要在你的场景中使用setInterval，但如果你真的想要/需要使用它，我会建议你找到一种方法来清除你的间隔结束。

使用简单的setTimeout进行操作的方法就像这样

＆＃13;

function doColoring(targetClass) {
  runThroughSamples( Array.prototype.slice.call($(targetClass)), 500, 'yellow' );
}

function runThroughSamples( samplesArr, timeout, classToToggle ) {
  if ( !samplesArr || !samplesArr.length ) {
    return;
  }
  setTimeout( function() {
    $(samplesArr[0]).toggleClass(classToToggle);
    runThroughSamples( samplesArr.slice(1), timeout, classToToggle );
  }, timeout);
}

＆＃13;

.yellow {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  1
</div>
<div class="item">
  2
</div>
<div class="item">
  3
</div>
<div class="item">
  4
</div>
<div class="item">
  5
</div>
<button type="button" onclick="doColoring('.item')">Start setTimeout example</button>

＆＃13;

当然你也可以用一个间隔来做，只是重要的是之后清除间隔

＆＃13;

function doColoring(targetClass) {
  runThroughSamples( Array.prototype.slice.call($(targetClass)), 500, 'yellow' );
}

function runThroughSamples( samplesArr, timeout, classToToggle ) {
  if ( !samplesArr || !samplesArr.length ) {
    return;
  }
  var interval = setInterval( function() {
    $(samplesArr[0]).toggleClass(classToToggle);
    samplesArr.splice(0, 1);
    if (samplesArr.length === 0) {
      clearInterval(interval);
    }
  }, timeout);
}

＆＃13;

.yellow {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  1
</div>
<div class="item">
  2
</div>
<div class="item">
  3
</div>
<div class="item">
  4
</div>
<div class="item">
  5
</div>
<button type="button" onclick="doColoring('.item')">Start setInterval example</button>

＆＃13;

Answer 2

这是你必须要做的。 Demo Working Fiddle

首先设置开始时间间隔的起点。让第一个圆圈作为开始$('#circle1')
然后使用Jquery setInterval每隔2秒（2000毫秒）运行。
将类yellow附加到区间内，并更新指针以指向下一个元素。

Jquery代码如下。

var circle = $('#circle1'); //start element

setInterval(function(){ 
      $('.yellow').removeClass('yellow');  //remove existing classes
      circle.addClass('yellow');           // add the class to current circle
      circle = circle.next();              //point the circle to next element. 

  if(circle.length === 0){         //if we have reached the last element go back to top
   circle = $('#circle1');
  }
}, 2000);

Answer 3

内部＆＃34;每个＆＃34;功能，您不必再为＃34; .circle＆＃34;解析文档。类。你基本上是设置班级＆＃34;黄色＆＃34;到所有div，然后将其重置为ALL。

你应该使用＆＃34;这个＆＃34;或者将iterator参数传递给function并使用它来切换类。

Answer 4

迭代元素数组。

var circles = $('.circle');
circles.each(function(index, item) {
   var $item = $(item);
   // Do your stuff with your item.
});

您需要使用$修饰项目，使其成为完整的jQuery元素。

但你只需要有一个间隔并跟踪你的div的状态，跟踪哪个div是最后一个有黄色类，设置下一个。它可以用一个间隔完成。

var circles, yellowCircleIndex,
changeColors;

circles = $('.circle');
yellowCircleIndex = circles.length;

changeColors = function() {
    var previousDiv, currentDiv;
    previousDiv = circles.eq(yellowCircleIndex);
    yellowCircleIndex = (yellowCircleIndex + 1) % circles.length;
    previousDiv.removeClass('yellow');
    currentDiv = circles.eq(yellowCircleIndex);
    currentDiv.addClass('yellow');
};

changeColors();
setInterval(changeColors, 2000);

每个div的单个间隔比一个间隔更有效。据我所知，你一次只想要一个黄色类的div，对吗？

Answer 5

我希望我理解你想要的结果，你在jQuery each和setTimeout以及setInterval中的语法都有问题。

另外我认为这更像是一个递归解决方案，而不是一个循环解决方案，我做了以下功能：

var circles = $(".circle");
var counter = 0;

function paintInYellow(div) {
  setTimeout(function() {
    div.toggleClass('yellow');
    if (counter < circles.length) {
      counter++;
    } else {
      counter = 0;
    }
    paintInYellow(circles.eq(counter));

  }, 2000);
}
paintInYellow(circles.first());

你可以看到一个关于小提琴的工作示例，在这里 - https://jsfiddle.net/fistuks/rL1h51fv/

使用each（）

5 个答案: