javascriptでクラス名を動的に置き換える方法

Question

クラスを動的に変更し、その末尾にカウンタを追加したいと考えています。私はこのコードを書いたが、文字列のように扱われる。

これはコードです：

var divClass = document.getElementById('div2'); 
var i = 1; 
setInterval(function() { 
    divClass.className=divClass.className.replace('color','color'+ i); 
    i++; 
},5000); 

私はこの問題を解決することができますか？代わりに

Answer 1

私は問題が最初のループの後にクラス名がcolor1になり、それが前の

divClass.className = 'color'+ i; 

が上書きされますので、あなたはあなただけのクラス名を設定することができ color12で終わるので、あなたが唯一の「色」の部分を交換することだと思います

あなたがそれらを上書きしないように、あなたが最初にそれらとそれらを格納することができます前に、クラスを持っていた場合：var classes = divClass.className; と、あなたは彼らにdivClass.className = classes + ', color'+ i;

Answer 2

用途：

element.className = 'other const clases' + 'color'+ i; 

あなたはクラスの完全な文字列を変更したり、例えば正規表現と2つの段階でそれを変更し、再度それを割り当てる必要があります。

Answer 3

を設定するときは、THIのようなJavaScriptであるclassList機能を使用することができますs：

var divClass = document.getElementById('div2'); 
var i = 1; 
setInterval(function() { 
    divClass.classList.remove('color' + (i - 1)); 
    divClass.classList.add('color' + i++); 
}, 5000); 

文字列で連結しているため、数字は文字列として扱われる可能性が高くなります。括弧内に項目を配置すると、それらは数字として実行されます（かっこ内のものが最初に実行されるため）。次に文字列として連結されます。