修改在Javascript

Question

另一个元素中的元素的类，所以我的HTML代码片段看起来是这样的：

<div class="accordion-heading "> 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" target="_self" href="#item-name"> 
     <b class=""> Items ({{vm.selectedItems.length}})</b> 
     <i class='fa fa-chevron-down'></i> 
    </a> 
</div 

所以，当它展开的HTML的变化看起来是这样的：

<div class="accordion-heading "> 
    <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" target="_self" href="#item-name"> 
     <b class=""> Items ({{vm.selectedItems.length}})</b> 
     <i class='fa fa-chevron-up'></i> 
    </a> 
</div> 

我如果chevron-up类应用，我想要删除相同并应用chevron-down类。

var element = document.getElementsByClassName("fa fa-chevron-up")[0]; 
element.classList.remove("fa-chevron-up").add("fa-chevron-down"); 

但是这不起作用。 因为一旦我们删除了类，它就表示can not add class to undefined。

如何实现相同？

Answer 1

Element.classList.remove不返回类列表，所以你不能做方法链接。你必须这样做：

var element = document.getElementsByClassName("fa fa-chevron-up")[0]; 
element.classList.remove("fa-chevron-up"); 
element.classList.add("fa-chevron-down");