javascript - 切换 'this' 内另一个元素的类

Question

我从 W3Schools 获得了一个 Accordion 代码但我想替换 icon <i> 的类.

我怎样才能switchClass() this 内的元素的这段代码？

来自 W3Schools 的代码:

var acc = document.getElementsByClassName("course-row");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("unit-row-hide");
    }
}

我的 HTML:

<div class="row-history">
    <div class="row course-row active">
        <div class="course-name col-md-4">
            <i class="fa fa-caret-right" aria-hidden="true"></i>
            <a href="https://www.xxx.com.br/curso-teste-4">Curso Teste 4</a>
        </div>
        <div class="course-progress col-md-2">
            <div class="course-progress-bar-wrapper col-md-8">
                <div class="course-progress-bar">&nbsp;</div>
            </div>
            <div class="course-progress-percent col-md-4">100%</div>
        </div>
        <div class="course-remaining col-md-2">Completo</div>
        <div class="course-timestamp col-md-2">21 horas atrás</div>
        <div class="course-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
    </div> <!--  .course-row -->

    <div class="unit-row">

        <div class="row single-unit">
            <div class="unit-name col-md-4">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                Curso Teste 4 - Unidade 3
            </div>
            <div class="unit-nbsp col-md-4">&nbsp;</div>
            <div class="unit-timestamp col-md-2">21 horas atrás</div>
            <div class="unit-remove col-md-2"><i class="fa fa-times" aria-hidden="true"></i></div>
        </div>

    </div> <!--  .unit-row -->
</div>

我需要替换类fa-caret-right来自<i class="fa fa-caret-right" aria-hidden="true"></i>至fa-caret-down当 div 折叠并返回到 fa-caret-right 时当它没有折叠时。

Answer 1

您已经使用了适当的函数:classList.toggle() 。只需选择 <i>元素并对两个类应用该函数:

var fa = this.getElementsByTagName("i")[0];
fa.classList.toggle("fa-caret-right");
fa.classList.toggle("fa-caret-down");

第一个删除了向右箭头，第二个添加了向下箭头。下次单击时，反之亦然(切换)。