Question

我有下面的代码我想用font-awesome +和-更改<i class="fa fa-plus"></i>和<i class="fa fa-minus"></i>

$( ".filter-tag-group .tag-group" ).each(function( index ) {
      var check_this=this;
      $(this).find(".show_filter_content").on( 'click', function() {
        if($(this).html()=="+"){ //in here
          $(this).html("-"); //in here
          $(check_this).find(".filter-title").addClass("active");
          $(check_this).find(".filter-content").css( "display","block" );
        }
        else{
          $(this).html("+"); //in here
          $(check_this).find(".filter-title").removeClass("active");
          $(check_this).find(".filter-content").css( "display","none" );
        }
      });
    });

我的HTML：

<span class="show_filter_content"><i class="fa fa-plus"></i></span>
<div class="row filter-content">
</div>

我试过自己，但我确实停止了运作。

Answer 1

您需要做的就是更改所需元素的类。您已经在使用代码执行此操作（例如。addClass()和removeClass()），但您可以使用toggleClass()来简化逻辑，如下所示：

＆＃13;

$(".filter-tag-group .tag-group .show_filter_content").on('click', function() {
  var $icon = $(this).find('i').toggleClass('fa-plus fa-minus');
  var $group = $icon.closest('.tag-group');
  $group.find('.filter-title').toggleClass('active');
  $group.find('.filter-content').toggle();
});

＆＃13;

.active { color: #C00; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="filter-tag-group">
  <div class="tag-group">
    <span class="filter-title active">Title</span>
    <span class="show_filter_content">
      <i class="fa fa-plus"></i>
    </span>
    <div class="row filter-content">Content</div>
  </div>
</div>

＆＃13;

Answer 2

您应该使用addClass("fa fa-plus")和removeClass("fa fa-plus")。同样的 - 签名也是。

更改HTML不会更改FA图标。

编辑：为图标指定一个特定的名称/类，如theIcon。

<span class="show_filter_content">
   <i class="fa fa-plus theIcon"></i>
</span>
<div class="row filter-content">
</div>

然后

$( ".filter-tag-group .tag-group" ).each(function( index ) {
  var check_this=this;
  $(this).find(".show_filter_content").on( 'click', function() {
    if($(this).hasClass("fa-plus")){ //is it + signed?
      $(this).find(".theIcon").removeClass("fa-plus"); //we will turn this to -
      $(this).find(".theIcon").addClass("fa fa-minus"); //turn it to minus

      //the rest does stuff
      $(check_this).find(".filter-title").addClass("active");
      $(check_this).find(".filter-content").css( "display","block" );
    }
    else {
      $(this).find(".theIcon").removeClass("fa-plus"); //we will turn this to +
      $(this).find(".theIcon").addClass("fa fa-minus"); //turn it to plus

      //the rest does stuff      
      $(check_this).find(".filter-title").removeClass("active");
      $(check_this).find(".filter-content").css( "display","none" );
    }
  });
});

Answer 3

更改HTML无济于事，font-awsome使用图标而非HTML文本。

因此，您实际上需要更改类名。使用addClass（）和removeClass（）。

您应该将此更改应用于您的代码：

而不是编写此代码：

  if($(this).html()=="+"){ //in here
      $(this).html("-"); //in here
      $(check_this).find(".filter-title").addClass("active");
      $(check_this).find(".filter-content").css( "display","block" );
    }
    else{
      $(this).html("+"); //in here
      $(check_this).find(".filter-title").removeClass("active");
      $(check_this).find(".filter-content").css( "display","none" );
    }

试试这个

  if($(this).hasClass('fa-plus')){ //in here
      $(this).removeClass('fa-plus').addClass('fa-minus);
    }
    else{
      $(this).removeClass('fa-minus').addClass('fa-plus);
    }

在jquery中使用fontawesome

3 个答案: