Bootstrap 4 Переключить значок на кнопке через JavaScript

Question

У меня загрузочная 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>