Question

我想动态更改一个类，并在其末尾添加一个计数器。我写了这段代码，但它被视为字符串。

这是代码：

var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
  divClass.className=divClass.className.replace('color','color'+ i);
  i++;
},5000);

我该如何解决这个问题？

Answer 1

我认为问题在于，在第一个循环之后，类名称将为color1并且您只替换“颜色”部分，因此您最终得到color12您可以设置className，因为这会覆盖前一个

divClass.className = 'color'+ i;

如果您之前有课程，可以先将它们存储起来，这样就不会覆盖它们：var classes = divClass.className; 当你设置它们divClass.className = classes + ', color'+ i;

时

Answer 2

您可以使用JavaScript中的classList功能：

var divClass = document.getElementById('div2');
var i = 1;
setInterval(function () {
    divClass.classList.remove('color' + (i - 1));
    divClass.classList.add('color' + i++);
}, 5000);

您的数字很可能被视为字符串，因为您正在使用字符串连接。通过将项目放在括号中，它们将作为数字执行（因为括号中的任何内容都先运行）然后连接成一个字符串。

Answer 3

改为使用：

element.className = 'other const clases' + 'color'+ i;

您必须更改完整的类字符串，或者使用例如正则表达式分两步更改它，然后再重新分配。

如何在javascript中动态替换类名

3 个答案: