要素のクラスを動的に変更する

Question

私のウェブサイトのバージョンピッカーを作成しようとしています。私が含める2つのオプションがあります：カラーピッカーとテキストアライメントピッカー。

特定のオプションをクリックすると、後でCSSでスタイル設定されるクラスが本文に適用されることになっています。

ここにそれのためのコードです：

HTML：

<div id="picker"> 
    <ul id="colors"> 
    <li id="version-6" class="choose-color">version 6</li> 
    <li id="version-5" class="choose-color">version 5</li> 
    </ul> 
    <ul id="align"> 
    <li id="text-to-center" class="choose-align">text-center</li> 
    <li id="text-to-left" class="choose-align">text-left</li> 
    </ul> 
</div> 

JS：

$('.choose-color').on('click', function(){ 
    var switchTo = $(this).attr('id') 
    var arrClasses = []; 

    $('[class*="version-"]').removeClass(function() { 
     console.log(this.className); 
     var className = this.className.match(/version-\d+/); 
     if (className) { 
      arrClasses.push(className[0]) 
      return className[0]; 
     } 
    }).addClass(switchTo); 

}); 

$('.choose-align').on('click', function(){ 
    var switchTo2 = $(this).attr('id') 
    var arrClasses2 = []; 

    $('[class*="text-to-"]').removeClass(function() { 
     var className2 = this.className.match(/text-to-\d+/); 
     if (className2) { 
      arrClasses2.push(className2[0]) 
      console.log(className2[0]) 
      return className2[0]; 
     } 
    }).addClass(switchTo2); 
}); 

JSコード（カラーピッカー）の最初の作品は素晴らしい作品 - それは任意のクラスの開始を削除"version-"を指定してクリックした要素のIDと等しいクラスを追加します。

私は2番目のコードでこの動作を再現しましたが、成功しませんでした。

これは、クラスを追加するだけですが、以前のクラスを削除することはありません。

どこかのタイプミスですか、それとも全体が間違っていますか？

Answer 1

あなたの問題は、第1に正規表現です：

var className2 = this.className.match(/text-to-\d+/); 

\dは、番号と一致します。それを.（任意の文字と一致する）に変更してください。