Question

我跟随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>

JsFiddle Link

有人可以指导我如何将图标更改为（glyphicon-chevron-up）。

谢谢

Answer 1

您可以使用 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>

Answer 2

像这样更改你的HTML -

    <div class="col-md-6">
     <a id="IdAdvanceSearch" href="javascript:;" class="col-sm-offset-2" data-advance-search="S">
      Show Advance Search 

     </a>
     <span class="glyphicon glyphicon-chevron-down"></span>
   </div>

并修改您的JQuery，如下所示 -

jQuery('#IdAdvanceSearch').on('click', function(){
var dh = jQuery("#IdAdvanceSearch").data('advance-search');

if(dh == 'S'){
  $('#IdAdvanceSearch').next('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
 jQuery("#IdAdvanceSearch").text('Hide Advance Search');
 jQuery('#IdAdvanceSearch').data('advance-search', 'H');
}
else if(dh == 'H'){
 $('#IdAdvanceSearch').next('.glyphicon-chevron-up').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
 jQuery("#IdAdvanceSearch").text('Show Advance Search');
 jQuery('#IdAdvanceSearch').data('advance-search', 'S');
}
});

Answer 3

答案是

 $('.glyphicon').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');

html的层次结构也存在问题。希望你期待这个。

将你的跨度放在锚标记之外。

JS Fiddle

Answer 4

在你的jQuery代码中更改为

jQuery('#IdAdvanceSearch').on('click', function(){
  var dh = jQuery("#IdAdvanceSearch").data('advance-search');

    if(dh === 'S'){
       jQuery("#IdAdvanceSearch").html('Hide Advance Search<span class="glyphicon glyphicon-chevron-up"></span>');
       jQuery('#IdAdvanceSearch').data('advance-search', 'H');
    }
    else if(dh === 'H'){
       jQuery("#IdAdvanceSearch").html('Show Advance Search<span class="glyphicon glyphicon-chevron-down"></span>');
       jQuery('#IdAdvanceSearch').data('advance-search', 'S');
    }
});

这是JSFiddle

使用jQuery html 代替jQuery text 以允许插入glyphicon ＆安培;当隐藏传递图标＆amp;当show pass up icon

jQuery：如何在旁边文本中更改图标

4 个答案: