如何使用jquery在bootstrap中切换字体图标？

我有一个引导手风琴在我的模板和一个字体可怕的fa-fa角度双右。如何打开“展开”和“折叠”选项？ 展开时更改为

fa-fa-angle double-down

，隐藏时更改为

fa-fa-angle double-right

这是我的模板：

<form action="." method="post">{% csrf_token %}
    {% include 'partials/form_field.html' with field=form.title %}
    {% include 'partials/form_field.html' with field=form.body %}
    {% include 'partials/form_field.html' with field=form.score %}

 <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#respond"aria-expanded="true" aria-controls="respond">
          Click to respond to this review <span class="fa fa-angle-double-right"></span>
        </a>
      </h4>
    </div>
    <div id="respond" class="panel-collapse collapse {% if review.responder_name and review.response %}in{%endif %}" role="tabpanel" aria-labelledby="response">
      <div class="panel-body">
          {% include 'partials/form_field.html' with field=form.responder_name %}
          {% include 'partials/form_field.html' with field=form.response %}
      </div>
    </div>
  </div>
 </div>
 <a href="{% url 'backend_reviews' %}" class="btn btn-default">Cancel</a>
 <input type="submit" class="btn btn-primary" value="Update Review" />
 <a href="{% url 'backend_reviews_delete' review.pk %}" class="btn btn-warning pull-right">Delete Review</a>
 </form>

{%csrf\u令牌%}
{%include'partials/form_field.html'，field=form.title%}
{%include'partials/form_field.html'，field=form.body%}
{%include'partials/form_field.html'，field=form.score%}
{%include'partials/form_field.html'，field=form.responder_name%}
{%include'partials/form_field.html'，field=form.response%}

我们开始：

更改问题的编辑：

HTML

另一种方法是

$('a[role="button"]').click(function(){
$(this).find('span').toggleClass('fa-angle-double-down fa-angle-double-right');
});

---

是的，但这只起作用一次。单击时，它不会恢复为双击again@DeA：然后存储并切换决定所需状态的变量。到底是什么问题？（请将此要求添加到您的问题中；您甚至没有提到它）您没有要求它，无论如何，如果您愿意，您可以为元素提供一个id，并通过检查其当前类来更改类。希望你能记下我的答案^^^@MarcoSalerno抱歉，我想要切换，好了，我已经更改了，你能解释投票否决的原因吗？我没有投票否决。这只是在类中添加了“fa-fa-angle-double-down”，使得图标无法呈现编辑过的答案，并让我知道这是否解决了问题。它没有。它的工作原理是这样的：隐藏并单击会使图标无法渲染和展开，（本应更改为双击）再次单击会隐藏部分，现在图标已更改为双击（本应更改为右双击）是否尝试了toggleClass one？

<span id="angle" class="fa fa-angle-double-right"></span>

$("#angle").click(function(){
    if($(this).attr('class') == "fa fa-angle-double-right"){
        $(this).attr('class', 'fa fa-angle-double-down');
    }
    else{
        $(this).attr('class', 'fa fa-angle-double-right');    
    }   
});

    var toggled = false;
    $('a[role="button"]').click(function(){
        if(toggled == false){
           $(this).find('span').addClass('fa fa-angle-double-down').removeClass('fa fa-angle-double-right');
           toggled = true;
        }else{
           $(this).find('span').addClass('fa fa-angle-double-right').removeClass('fa fa-angle-double-down');
           toggled  = false;
        }
    });

$('a[role="button"]').click(function(){
$(this).find('span').toggleClass('fa-angle-double-down fa-angle-double-right');
});