jQuery，单击时更改插入符号类

Question

我在下面的插入符号类中有此html代码fa fa-caret-down。现在，我希望如果用户单击插入符，则删除插入符的类将被替换为fa fa-caret-up该类。同样，如果他踢了插入式上课，它将回到插入式上课。

（任何其他方式也可以）。我已经试过了：

$(document).ready(function() {
    $('.fa-caret-down').on('click', function () {
        $(this).removeClass('fa-caret-down').addClass('fa-caret-up');
    });
    $(this).removeClass('fa-caret-up').addClass('fa-caret-down');
});

[此代码在此代码中也运行得非常糟糕]

但这仅适用于第一部分。如果我想回到插入符号，则什么也没发生。

那就是我的HTML：

---

<div id="acc-construct" class="hidden">
    <div class="acc-group">
        <div class="acc-head">
            <a class="acc-toggle collapsed acc-default" data-toggle="collapse"
               data-parent="#acc" href="#collapse-divsInContainer">
                <i data-arrow="" class="pull-right fa fa-caret-down"></i>
            </a>
        </div>
        <div id="collapse-divInContainer" class="acc-body collapse">
            <div class="acc-inner">
                <dl class="dl-horizontal"></dl>
                <div class="separator"></div>
            </div>
        </div>
    </div>
</div>

我在jquery / Js中仍然是新手，对不起我的英语不好。

谢谢你的帮助 ！

Answer 1

caret-icon在插入符号元素上设置另一个类（），然后将click事件附加到该类：

<i class="caret-icon fa fa-caret-down"></i>

并使用toggleClass()方法：

$(document).on('click', '.caret-icon', function() {
   $(this).toggleClass('fa-caret-up fa-caret-down');
})