Bootstrap 4通过JavaScript在按钮上切换图标

Question

我有一个带有可折叠手风琴表的Bootstrap 4页。每个都有一个FA-Times-Circle图标。当用户单击此按钮时，该图标需要更改为FA-plus-up。请帮助！

 <script type="text/javascript">
          toggleCircle = function(button) {
          $(button).find('span').toggleClass('fas fa-times-circle fa-plus-circle');
    }
</script>
 <button class="btn text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="toggleCircle(this)"> <span class="fas fa-chevron-down"></span>

Answer 1

您可以使用： if ($(e.children).attr("class").includes('down')) {检测图标是否向下箭头，然后使用：

$(e.children).removeClass("fa-chevron-down");
$(e.children).addClass("fa-chevron-up");

将课程添加到上/向下。

toggleCircle = function(e) {
  if ($(e.children).attr("class").includes('down')) {
    $(e.children).removeClass("fa-chevron-down");
    $(e.children).addClass("fa-chevron-up");
  } else {
    $(e.children).removeClass("fa-chevron-up");
    $(e.children).addClass("fa-chevron-down");
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" onclick="toggleCircle(this)"> <span class="fas fa-chevron-down"></span>