为什么for()循环不起作用?

why this for()loop isn't working?

本文关键字：不起作用 循环 for 为什么      更新时间：2023-09-26

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

我试图一次改变每个元素的类名。

所以我尝试了这个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');

但是它不工作。

我不知道为什么。

为什么这个代码不能工作?有什么问题吗?

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;

当你改变类名,该元素不存在,假设你有4个元素的类,所以当你改变第一节课,你有3类和当你改变第二个类,2班仍然但侧吹风的循环调用,达到before[2],它导致一个错误,因为它寻找侧吹风元素但你只有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');

检查JSFiddle Demo

相关文章：