jQuery:如何更改旁边文本的图标

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>