Question

我有多个具有相同类名的元素。

我试图改变每一个元素＆＃39;类名一次。

所以我尝试了这个js句子。

function chngeClass2(from, to){  //chngeClass() is change class name of an element, using its id.
    var before;
    before = document.getElementsByClassName(from);
    for(i=0,len=before.length ; i<len ; i++){
        before[i].className = to;
    }
}

chngeClass2('test', 'test_ani');

但它不起作用。

我不知道为什么。

为什么这段代码不起作用？有什么问题？

Answer 1

getElementsByClassName()函数返回实时 DOM节点列表。它是“实时”意味着当您更改所涉及的元素时，列表会更改。当您更改元素的类时，它不再在列表中！

您可以通过在更改任何元素之前将节点列表复制到普通数组中来处理该问题，或者只是使用while循环迭代直到列表为空，只需查看每个元素的第一个元素迭代：

var before = document.getElementsByClassName(from);
while (before.length)
  before[0].className = to;

您可能还想添加一个测试，以确保“to”不是包含“from”类的字符串，否则循环将永远不会终止。事实上，因为在像你这样的函数的一般情况下，很难弄清楚是否存在无限循环，所以可能更容易进行数组复制方法：

var before = document.getElementsByClassName(from);
before = [].slice.call(before, 0);
for (var i = 0; i < before.length; ++i)
  before[i].className = to;

Answer 2

当您更改类名时，该元素不再存在，假设您有4个元素与该类，因此当您更改第一个类时，您有3个类，当您更改第二个类时，2 class仍然存在，但循环处于第3次调用并且到达before[2]，它会导致错误，因为它查找第3个元素，但在第一次和第二次更改后只有2个元素。

使用此：

    function chngeClass2(from, to){
    var before;
    before = document.getElementsByClassName(from);
    for(i=0,j=before.length ; i<j ; i++){
        before[0].className = to;
    }
}
chngeClass2('test', 'test_ani');

Check JSFiddle Demo

为什么这个for（）循环不起作用？

2 个答案: