Question

我正在尝试在jQuery中切换图标的类名。

我正在使用font-awesome库，它只替换了我班级中的初始“fa”，这里是我的jsfiddle

$('[name="caret"]').click(function() {
    $(this).toggleClass('fa fa-caret-up fa-1x');
});

JSFiddle

Answer 1

好吧它没有更改为fa-caret-up，因为你也在切换类fa，这对于字体真棒库来说是必须的，以实现它是一个图标。

所以就这样做

        $('[name="caret"]').click(function() {
            $(this).toggleClass('fa-caret-up fa-caret-down');
        });

这将删除fa-caret-down类，并添加fa-caret-up类。

Updated Fiddle

Answer 2

而只是使用它：

$(this).toggleClass('fa-caret-up');

在css中你可以看到类的顺序。一个是最后它只是覆盖了顺序中的上一个。因此，将类fa-caret-up切换到现有类就足够了。

您可以看到以下示例：

$('[name="caret"]').click(function () {
  $(this).toggleClass('fa-caret-up');
});

body {
  font-family: Arial;
}

.accordion {
  border-top: 1px solid #c1c1c1;
}

.accordion dt {
  border: 1px solid #c1c1c1;
  border-top: 0px solid #c1c1c1;
  margin: 0px;
  padding: 10px 15px;
  display: block;
  cursor: pointer;
  overflow: hidden;
}

.accordion dt span {
  float: left;
  font-weight: normal;
  font-size: 17px;
}

.accordion dt .accordion_icon {
  float: right;
}

.accordion dt.active {
  background: #DBDBDB;
}

.accordion_content {
  margin: 0;
  padding: 15px;
  border-left: 1px solid #c1c1c1;
  border-right: 1px solid #c1c1c1;
  border-bottom: 1px solid #c1c1c1;
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="tablesorter table table-striped">
  <thead>
    <tr>
      <th width="75px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
      <th width="125px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
      <th width="550px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
      <th width="100px"><i name="caret" class="fa fa-caret-down fa-1x"></i></th>
      <th></th>
    </tr>
  </thead>
</table>

Answer 3

$( "input[name='caret']" ).click(function() {
  if ($(this).hasClass('fa-caret-up')) {
      $(this).removeClass().addClass('fa fa-caret-down');
  } else {
      $(this).removeClass().addClass('fa fa-caret-up fa-1x');
  }
});

jQuery切换完整的类名

3 个答案: