Javascript JQuery切换图标具有多种不同的图标问题

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

这就是我所取得的成绩：

<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>

我已经设置了一个JSFIDLE来显示它的工作情况

因此，当我点击“信息圈”时，十字架被应用，当我点击另一个十字架时，十字架被移除。我该如何应用它，使每个图标都如此

---

任何帮助都将不胜感激，希望我说清楚。

如果您使用特定的图标类名向锚定标记添加数据属性，如是

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

小提琴是

我将从所有按钮中删除“十字”图标类，然后将所有按钮重置为其默认图标，最后为当前按钮绘制“十字”（如果需要）。像这样：

$('.faq-links').click(function(){
        var notCollapsed = $(this).find('i').hasClass('fa-times');              

        //Remove crosses from all buttons
        $('.faq-links').find('i').removeClass('fa-times');          

        //Reset the default icon for each button 
        $('.faq-links:eq(0)').find('i').addClass('fa-info-circle');
        $('.faq-links:eq(1)').find('i').addClass('fa-heartbeat');
        $('.faq-links:eq(2)').find('i').addClass('fa-comments');

        //Draw the cross if needed
        if(!notCollapsed) $(this).find('i').attr("class",'fa fa-times fa-3x');
});

---

如果您有办法确保类fa times优先于fa heartbeat、fa info circle和fa comments类，请查看更新fiddle。这个简单的代码可以正常工作

$('.faq-links').click(function() {
  var blockI = $(this).find('i');
  if(blockI.hasClass('fa-times')) {
    // remove fa-times class if the element already has it
    blockI.removeClass('fa-times');
  }
  else {
    // clean the classes from other elements that might have it
    $('.faq-links i').removeClass('fa-times');
    // adds it on the clicked element
    blockI.addClass('fa-times');
  }
});

您可以在以后的css文件或样式块中重新定义类fa时间，和/或使用更具体的选择器重新定义该类，以便fa时间样式“覆盖”其他类。那对我来说是最好的，因为你不需要和其他的课程混在一起。您可以修改链接的顺序或添加新闻链接，脚本仍然可以工作。

HTML:

<i id="icon" class="fa fa-heartbeat fa-3x" data-icon="fa-heartbeat"></i>

关于JS：

我相信干净的代码编写。越干净越好-在你的编码冒险中坚持这一点。 首先，我们使用

$icons

——我们拥有的每个图标。 我们正在等待

单击
事件。
单击其中一个
$图标后，我们将
$this
设置为单击的图标。我们还将
$icon
设置为单击图标中的
元素，只是为了更干净的代码

iconName
等于icon的数据属性，因此我们可以在后续步骤中轻松使用它

现在我们有了
//句柄状态
部分。很容易理解，如果
$icon
有class，它等于
closeIconName
（本例中为叉号），则它是“活动的”。因此，单击此“活动”图标后，我们将删除“活动”状态，这意味着，我们将删除
closeIconName
类，并添加
iconName
，这是默认图标名称（取自数据属性）。如果图标不处于“活动”状态，我们将删除该图标并添加
closeIconName
图标

注意：没有数据属性的图标不会更改为fa close图标

编辑：这里是JSFIDLE:
您不应该多次使用
id=“icon”
。@Banzay很好，甚至没有看到这一点
$('.faq-links').click(function() {
  var blockI = $(this).find('i');
  if(blockI.hasClass('fa-times')) {
    // remove fa-times class if the element already has it
    blockI.removeClass('fa-times');
  }
  else {
    // clean the classes from other elements that might have it
    $('.faq-links i').removeClass('fa-times');
    // adds it on the clicked element
    blockI.addClass('fa-times');
  }
});

<i id="icon" class="fa fa-heartbeat fa-3x" data-icon="fa-heartbeat"></i>

// jQuery safety
(function($) {

  // DOM ready
  $(function() {

    // icons
    var $icons = $('.faq-links');
    $icons.on('click', function(e) {

      // variables
      var $this = $(this);
      var $icon = $this.find('i');

      // iconName taken from data-icon attribute
      var iconName = $icon.data('icon');

      // close icon
      var closeIconName = 'fa-times';

      // prevent default browser behaviour, just in case
      e.preventDefault();

      // handle state
      if ($icon.hasClass(closeIconName)) {
        $icon.removeClass(closeIconName).addClass(iconName);
      } else {
        $icon.addClass(closeIconName).removeClass(iconName);
      };
    });
  });
})(jQuery);