Question

我从W3Schools获得了一个手风琴代码，但我想替换一个icon <i>的类。

我可以switchClass() this对此代码中的元素进行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"); } }吗？

W3Schools的代码：

<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>

我的HTML：

fa-caret-right

我需要在div折叠时将<i class="fa fa-caret-right" aria-hidden="true"></i>的{{1}}替换为fa-caret-down，并在未折叠时将其替换回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");

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

切换'this'中另一个元素的类

1 个答案: