JavaScript - CSSクラスとsetIntervalメソッドを使用した背景変更

Question

私はJavaScriptが新しく、タイムインターバルとCSSクラスの変更で自動バックグラウンドチェンジャーを作りたいと思います。現時点では、私のコードは2つの背景を意図した通りに循環させません。あなたは何が間違っているかを確認できますか？

ありがとうございます！

$(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

switch()文を区間関数コールバックに移動します。 returnも削除してください。あなたがtoggleClassを使用していないのはなぜ

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

、それは非常にクリーンです：

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

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

ちょうどあなたがdiv要素にデフォルトのクラスを割り当てることを確認してください：

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

</div>