javascript - 在 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");

但这不能正常工作。因为一旦我们删除了该类，它就会说无法将类添加到未定义。

如何实现同样的效果？

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");