我有以下 JsFiddle:
<div class="col-md-6">
<a id="IdAdvanceSearch" href="javascript:;"
class="col-sm-offset-2"
data-advance-search="S">
Show Advance Search
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
有人可以指导我如何将图标更改为 (glyphicon-chevron-up)。
谢谢
最佳答案
您可以使用removeClass()
和 addClass()
,我还更新了您的标记以使其变得简单
jQuery('#IdAdvanceSearch').on('click', function() {
var dh = jQuery(this).data('advance-search');
if (dh === 'S') {
jQuery(this).find('.text').text('Hide Advance Search')
.end().data('advance-search', 'H')
.find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else if (dh === 'H') {
jQuery(this).find('.text').text('Show Advance Search')
.end().data('advance-search', 'S')
.find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
<a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
<span class="text">Show Advance Search </span>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
或者使用相同的标记,你可以做这样的事情
jQuery('#IdAdvanceSearch').on('click', function() {
var dh = jQuery(this).data('advance-search');
if (dh === 'S') {
jQuery(this).contents().eq(0).replaceWith('Hide Advance Search')
.end().end().data('advance-search', 'H')
.find('.glyphicon').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else if (dh === 'H') {
jQuery(this).contents().eq(0).replaceWith('Show Advance Search')
.end().end().data('advance-search', 'S')
.find('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
<a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
Show Advance Search
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
或者只是更新里面的整个html内容
jQuery('#IdAdvanceSearch').on('click', function() {
var dh = jQuery(this).data('advance-search');
if (dh === 'S') {
jQuery(this).data('advance-search', 'H')
.html('Hide Advance Search<span class="glyphicon glyphicon-chevron-up"></span>');
} else if (dh === 'H') {
jQuery(this).data('advance-search', 'S')
.html('Show Advance Search<span class="glyphicon glyphicon-chevron-down"></span>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<div class="col-md-6">
<a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
Show Advance Search
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
关于jQuery:如何更改旁边文本的图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33729894/