Jquery，点击时更改插入符号类

Jquery, change caret class on click

本文关键字：插入 符号 Jquery      更新时间：2023-09-26

我有这个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新手，很抱歉我的英语不好。

谢谢你的帮助!

在插入符号元素上设置另一个类(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');
})

对'hasClass'方法使用'if - else'条件。

这里是Jquery

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

$('.fa-caret-down')在执行代码时找到具有fa-caret-down类的DOM -元素，在初始化之后。这些元素获得一个click处理程序，该处理程序删除fa-caret-down并添加fa-caret-up。具有此处理程序的元素以后不会更改。因此，第二次单击其中一个元素也会删除fa-caret-down并添加fa-caret-up。

如果元素当前具有fa-caret-down或fa-caret-up类，则必须在处理程序中检查。如果它有fa-caret-down类，你必须删除fa-caret-down并添加fa-caret-up。如果它有fa-caret-up类，你必须删除fa-caret-up并添加fa-caret-down。

您当前的代码$(this).removeClass('fa-caret-up').addClass('fa-caret-down');没有帮助，因为它在初始化后只执行一次。

相关文章：