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

如果您将数据属性添加到具有特定图标类名称的锚标记，如此

<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'));
  }
});

小提琴是here

Answer 2

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

$('.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');
});

查看您的更新小提琴https://jsfiddle.net/8odoros/yycf2jb8/10/

Answer 3

如果你有办法确保类fa-times优先于fa-heartbeat，fa-info-circle和fa-comments类，这个简单的代码就可以正常工作。

$('.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-times和/或使用更具体的选择器重新定义类，以便fa-times样式“覆盖”其他类。这对我来说是最好的，因为你不需要乱搞其他类。您可以修改链接的顺序或添加新闻链接，脚本仍然有效。

Answer 4

HTML：

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

关于HTML：

要存储图标名称，最好的方法是使用data-attributes。这很容易理解+将来更改它没有问题。请确保仅对一个id使用DOM Element属性，对于多个元素，请使用class属性。

JS：

// 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);

关于JS：

我相信干净的代码编写。更干净，更好 - 坚持你的编码冒险。首先，我们采用$icons - 我们拥有的每个图标。我们正在等待click事件。单击$icons之一后，我们会将$this设置为点击的图标。我们还在点击图标中将$icon设置为<i></i>元素，仅用于更清晰的代码。

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

现在我们有// handle state部分。很容易理解，如果$icon具有等级closeIconName（在此示例中为交叉），则它是“活跃的”。所以一旦这个活跃的＆＃39;点击了图标，我们删除了“有效”状态state，表示我们删除closeIconName类，我们添加iconName这是默认的图标名称（取自data-attribute）。如果该图标未激活，我们会删除该图标，然后添加closeIconName图标。

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

编辑：这是JSFiddle：https://jsfiddle.net/0fy2po3b/1/

带有各种不同图标的JQuery Toggle图标问题

4 个答案: