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

在Javascript中的另一个元素内修改元素的类

1 个答案: