javascript - 如何在 Bootstrap 4 中切换 font-awesome 图标和可折叠图标？

Question

让以下代码可以正常工作并切换可折叠。问题出在font Awesome icon。如果单击 + 符号，它将展开卡片及其工作，但不会更改为 - 符号。

编辑

只有 1 个可折叠窗口会打开，并且事件的可折叠窗口必须带有 - 符号，另一个是 + 符号，依此类推。

我的语法正确吗？

$(".colHide").click(function (e) {
  
    $(this).toggleClass("fa fa-plus").toggleClass("fa fa-minus");

    setTimeout(function () {
        $(".clsColHide").find("div.show").removeClass("show").fadeOut("slow", 100);
        $(".colHide ").removeClass().addClass("fa fa-plus float-right colHide");
        if ($(this).hasClass("fa fa-plus"))
            $(e.target).removeClass().addClass("fa fa-minus float-right colHide");
        
    }, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 1
                <a class="fa fa-minus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
           partial 1
        </div>
    </div>
</div> 

<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 2
                <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="Complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
           partial 2
        </div>
    </div>
</div>

<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 3
                <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="Complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
            partial 3
        </div>
    </div>
</div>

Answer 1

您所需要的只是 not selector所以你当前的元素不会更新

$(".colHide").click(function (e) {
debugger;
  
  if($(this).hasClass("fa-minus")){
  $(this).removeClass("fa fa-minus").addClass("fa fa-plus")
  }else{
  $(this).removeClass("fa fa-plus").addClass("fa fa-minus");
  }
$(".colHide").not(this).removeClass("fa fa-minus").addClass("fa fa-plus")
    setTimeout(function () {
        $(".clsColHide").find("div.show").removeClass("show").fadeOut("slow", 100);
    }, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 1
                <a class="fa fa-minus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse1" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="complied0" name="complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse1" class="collapse show pt-3 pl-4 pr-4" data-parent="#accordion">
           partial 1
        </div>
    </div>
</div> 

<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 2
                <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse2" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="Complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse2" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
           partial 2
        </div>
    </div>
</div>

<div class="col-md-12 clsColHide">
    <div id="card_one" class="card">
        <div class="card-header bg-success">
            <h3 class="card-title">
                text 3
                <a class="fa fa-plus float-right colHide" id="min" data-toggle="collapse" data-target="#collapse3" href="#collapseOne"></a>
                <a class="custom-control custom-checkbox float-right">
                    <input type="checkbox" class="custom-control-input" id="Complied0" name="Complied0" value="true">
                    <label class="custom-control-label font-weight-normal" for="Complied0">
                        Complied
                    </label>
                    &nbsp;&nbsp;
                </a>
            </h3>
        </div>
        <div id="collapse3" class="collapse pt-3 pl-4 pr-4" data-parent="#accordion">
            partial 3
        </div>
    </div>
</div>