wie man die Farbe der Elemente einzeln mit javascript (jquery) ändert und dann das Ergebnis wieder eins nach dem anderen

Question

Wie ändert man die Farbe der Elemente eins nach dem anderen mit Javascript (jquery) und dann das Ergebnis wieder eins nach dem anderen zurückgesetzt .cub { Hintergrund: Aqua; Breite: 200px; Höhe: 200px; Anzeige: Inline-Block; }

Answer 1

Sie können Klassen hinzufügen und Klassen mithilfe von jQuery entfernen. Weisen Sie diesen Divs zuerst eine andere Klasse zu, damit keine anderen Divs betroffen sind.

<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 

var counter = 0; 
var divs = $('.box'), div = null; 
setInterval(function(){ 
    div = $(divs[counter]); 
    if(div.hasClass('cub')){ 
    div.removeClass('cub'); 
    } else { 
    div.addClass('cub'); 
    } 
    counter = (counter + 1) % 4; 
}, 500); 

Answer 2

Bitte versuchen Sie diesen Code, wenn es funktioniert. Ich konnte es nicht überprüfen, aber es sollte funktionieren.

<div class="cub"></div> 
<div class="cub"></div> 
<div class="cub"></div> 
<div class="cub"></div> 

.cub{ background-color: white; } 
.cub.highlighted{ background-color: aqua; } 

    <script> 
     var highlighting = true; 

     $(document).ready(function(){ 
     var highlightingInterval = setInterval(function(){ 
      if($(".cub.highlighted").length == 0) 
      highlighting = true; 
      else if($(".cub.highlighted").length == 4) 
      highlighting = false; 

      if(highlighting) 
      { 
      $(".cub").not(".highlighted").eq(0).addClass("highlighted"); 
      } 
      else 
      { 
      var targetIndex = $(".cub.highlighted").length - 1;         $(".cub.highlighted").eq(targetIndex).removeClass("highlighted"); 
      } 
     }, 2000);//setInterval 
     });//document ready 
    </script>