javascript会更改一些类名

javascript changes one some class names

本文关键字：javascript      更新时间：2023-09-26

我的javascript函数只更改了4个类中的两个。如果我再次单击它，它会更改第三个，但会完全忽略最后一个。

function move(obj,obj2) {
    var _elements = document.getElementsByClassName(obj);
    document.getElementsByClassName(obj2).className = 'none';
    for( var i = 0; i < _elements.length; i ++){
        _elements[i].className ='none';
    }
}

<a href="javascript: move('bigbox','bigbox_submit');"  id="closebigbox" >Clear</a>
<form>
    <input type="text" class="bigbox" /><br/>
    <input type="text" class="bigbox" /><br/>
    <input type="text" class="bigbox" /><br/>
</form>
<a href="javascript:" class="bigbox_submit" >Submit</a>

我如何让它停止这样做，同时执行。

方法document.getElementsByClassName()返回一个NodeList，它是一个"活动"对象。也就是说，随着DOM的变化，NodeList实例也随之变化。因此，每次更改节点列表中某个元素的类时，该元素都会从节点列表中删除，因为它不再与该类匹配。您可以使用while循环： 
var _elements = document.getElementsByClassName(obj);
while (_elements.length) {
    _elements[0].className ='none';
}

第二个问题是将名为className的特性指定给NodeList对象。这不会影响该NodeList对象中的任何元素。您需要设置NodeList中元素的className。

document.getElementsByClassName(obj2)[0].className = 'none';

.getElementsByClassName()方法应该返回NodeList（尽管根据MDN，大多数浏览器都返回HTMLCollection），这意味着你需要像数组一样访问它。因此，您不能直接在返回上设置.className，而不是：

document.getElementsByClassName(obj2).className = 'none';

您需要：

var els = document.getElementsByClassName(obj2),
    i;
for (i = els.length - 1; i >= 0; i--)
   els[i].className = 'none';
// or if you know there will always be exactly one element returned:
document.getElementsByClassName(obj2)[0].className = 'none',

我将循环设置为倒计时的原因是NodeList应该是活动的，所以如果你开始修改列表中的元素，它们可能会从列表中消失，并扰乱你的计数器。

相关文章：