jQuery 切换完整 class 名称
jQuery toggle full class name
我正在尝试切换 jQuery 中图标的 class 名称。
我正在使用 font-awesome 库,它只替换了我 class 中的初始 "fa",这是我的 jsfiddle
$('[name="caret"]').click(function() {
$(this).toggleClass('fa fa-caret-up fa-1x');
});
好吧,它不会更改为 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。
而是使用这个:
$(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>
$( "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 名称。
我正在使用 font-awesome 库,它只替换了我 class 中的初始 "fa",这是我的 jsfiddle
$('[name="caret"]').click(function() {
$(this).toggleClass('fa fa-caret-up fa-1x');
});
好吧,它不会更改为 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。
而是使用这个:
$(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>
$( "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');
}
});