javascript - 动态改变元素的类

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>

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 的类。

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

它只是添加了该类，但没有删除以前的类。

是某个地方有错别字还是整个想法都是错误的？

Answer 1

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

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

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