动态更改元素的类

Question

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

当单击特定选项时，应该将类应用于稍后在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>

联署材料：

$('.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相等的类。

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

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

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

Answer 1

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

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

\d匹配一个数字。将其更改为. (与任何字符匹配)