JavaScript - Hintergrund ändern mit CSS-Klasse und setInterval-Methode

Question

Ich bin ziemlich neu mit JavaScript und ich würde gerne eine automatische Hintergrund-Changer mit zeitgesteuerten Intervallen und CSS-Klassenänderungen machen. Momentan läuft mein Code nicht wie geplant zwei Hintergründe. Kannst du mal nachsehen, was damit nicht stimmt?

Danke!

$(document).ready(function() { 

    var switcher = 0; 

    var counter = setInterval(count, 2000); 

    function count() { 
    switcher = switcher + 1; 
    if (switcher >= 2) { 
     switcher = 0; 
     return; 
    }; 
    }; 


    switch (switcher) { 

    case 0: 
     $("#main-content").removeClass("background1"); 
     $("#main-content").addClass("background3"); 
     break; 

    case 1: 
     $("#main-content").removeClass("background3"); 
     $("#main-content").addClass("background1"); 
     break; 


    }; 
}); 

Answer 1

Verschieben switch() Anweisung in Intervallfunktion Rückruf. Entfernen Sie auch return.

function count() { 
    switcher = switcher + 1; 
    if (switcher >= 2) { 
     switcher = 0; 
    }; 
    switch (switcher) { 

     case 0: 
      $("#main-content").removeClass("background1"); 
      $("#main-content").addClass("background3"); 
      break; 

     case 1: 
      $("#main-content").removeClass("background3"); 
      $("#main-content").addClass("background1"); 
      break; 
    }; 

}; 

Answer 2

Warum nicht toggleClass verwenden, ist es viel sauberer:

$(function() { 
    var switcher = 0; 
    var counter = setInterval(count, 2000); 

    function count() { 
     $("#main-content").toggleClass("background1 background3") 
    }; 
}); 

So stellen Sie sicher, dass Sie eine Standard-Klasse dem div zuweisen:

<div id="main-content" class="background1"> 

</div>