通过JavaScript在按钮上启动Bootstrap 4 Toggle图标

Question

我有一个带有可折叠手风琴表的bootstrap 4页面。 每个都有一个fa-times-circle图标。 用户时用户单击此按钮时，该图标需要更改为fa-up-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>