Javascript 动态更改元素的类

我正在尝试为我的网站创建一个版本选择器。我想包括两个选项-颜色选择器和文本对齐选择器

当一个特定的选项被点击时，它应该将类应用到主体上，这些主体后来被样式化为CSS

下面是它的代码：

HTML:

js代码的第一个颜色选择器工作得很好——它删除任何以version开头的类——然后添加与所单击元素的ID相等的类

我尝试用第二段代码重新创建这种行为，但没有成功

它只是添加类，而不是删除上一个类

这是某个地方的打字错误还是整个想法都错了？

您的问题是第二个问题中的正则表达式：

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

---

\d匹配一个数字。把它改成。与任何角色都匹配

谢谢，这就像一个符咒。只要允许我6分钟，我就会接受你的回答。arrClasses数组用于什么？

$('.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);
});

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