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匹配一个数字。将其更改为.（与任何字符匹配）

动态更改元素的类

1 个答案: