jQuery 切换完整 class 名称

Question

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

我正在使用 font-awesome 库，它只替换了我 class 中的初始 "fa"，这是我的 jsfiddle

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

JSFiddle

Answer 1

好吧，它不会更改为 fa-caret-up，因为您还切换了 class fa，这对于 font awesome 库来说是强制性的，以实现它是一个图标。

那就这样吧

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

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

Updated Fiddle

Answer 2

而是使用这个：

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

与 css 中一样，您可以看到 class 的顺序。一个是最后一个，它只是覆盖顺序中的上一个。因此，将 class 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 切换完整 class 名称

jQuery toggle full class name

javascript

jquery

font-awesome