javascript - 具有各种不同图标问题的 JQuery 切换图标

Question

我目前正在尝试设置一个带有图标切换的菜单，因此当单击一个图标时它会变为一个十字，然后当该十字被单击时它会变回原始图标。我已经做到这一点了，但是当我单击一个新图像时，我希望旧图标重置并将十字应用于新图标。

这是我得到的结果:

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFive">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-info-circle fa-3x"></i>
        </a>
    </div>
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading13">
        <a class="collapsed faq-links">
            <i id="icon" class="fa fa-heartbeat fa-3x"></i>
        </a>
    </div>       
</div>
<br />
<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFour">
        <a class="collapsed faq-links" >
            <i id="icon" class="fa fa-comments fa-3x"></i>
        </a>
    </div>
</div>

Javascript:

$('.faq-links').click(function(){
    var collapsed=$(this).find('i').hasClass('fa-info-circle');
    $('.faq-links').find('i').removeClass('fa-times');
    $('.faq-links').find('i').addClass('fa-info-circle');
    if(collapsed)
        $(this).find('i').toggleClass('fa-info-circle fa-3x fa-times fa-3x')
});

我已经设置了一个 JSFiddle 来展示它的工作 https://jsfiddle.net/BenjiBaird/yycf2jb8/1/

因此，当我点击信息圈时，会应用十字，而当我点击另一个时，十字会被移除。我该如何着手将其应用于每个图标。

如有任何帮助，我们将不胜感激，希望我说清楚了。

Answer 1

如果像这样向具有特定图标类名称的 anchor 标记添加数据属性

<a class="collapsed faq-links" data-icon-name="fa-info-circle">
  <i id="icon" class="fa fa-info-circle fa-3x"></i>
</a>

您可以使用该属性在“fa-times”和原始图标之间切换图标

查看下面的代码和 JSFiddle，了解它是如何工作的。代码中也存在效率低下的问题，即不断使用 .find('i')，但我会留给您为此提出解决方案。

$('.faq-links').click(function() {
  if ($(this).find('i').hasClass('fa-times')) { //then change back to the original one
    $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
  } else {
    $('.faq-links').each(function(){ //Remove the cross from all other icons
        if($(this).find('i').hasClass('fa-times')) {
        $(this).find('i').removeClass('fa-times').addClass($(this).data('icon-name'));
      }
    });
    $(this).find('i').addClass('fa-times').removeClass($(this).data('icon-name'));
  }
}); 

fiddle 是 here