单击时更改链接图标

Question

I would like to change icon when the user clicks into the link by jQuery. I've read some post from this page but I'm not able to get it.

This is my PHP template.

<!-- Information message -->
<?php if (!empty($message) || !empty($message_alert)): ?>
    <b><a class="expedition-info-link" href="#expedition-info" data-toggle="collapse">
      <?php print t('More info'); ?>
      <i class="fas fa-angle-right"></i>
    </a></b>
    <div id="expedition-info" class="collapse alert alert-info info">
      <?php if (!empty($message)): ?>
        <p><?php print nl2br($message); ?></p>
      <?php endif; ?>
      <?php if (!empty($alert_message)): ?>
        <p><?php print nl2br($alert_message); ?></p>
      <?php endif; ?>
    </div>
<?php endif; ?>

And this is the JS file.

$('.expedition-info-link').on('click', function() {
    $(this).find('i')
      .toggleClass('fa-angle-right')
      .toggleClass('fa-angle-down');
});

I just wanna change the icon " fa-angle-right " for this one " fa-angle-down ". What am I doing wrong? Thanks all for help!

Answer 1

That could be achieved simply in one line using the jQuery method .toggleClass() .

 $('.expedition-info-link').on('click', function() { $('i', this).toggleClass('fa-angle-right fa-angle-down'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> <b> <a class="expedition-info-link" href="#expedition-info" data-toggle="collapse">More info <i class="fa fa-angle-right"></i></a> </b>

Answer 2

You can check the icon's class with .hasClass() and change it.

$('.expedition-info-link').on('click', function() {
    var icon =  $(this).find('i');
    if(icon.hasClass('fa-angle-right')){
         icon.removeClass('fa-angle-right');
         icon.addClass('fa-angle-down');
    }else{
         icon.addClass('fa-angle-right');
         icon.removeClass('fa-angle-down');
    }
  });

Answer 3

In Bootstrap 3 you should be able to use the .collapsed class too. In that case no need for extra javascript logic to change your icons.

.expedition-info-link:before {
    content: '\f105'; // angle right
    font-family: FontAwesome;
}
.expedition-info-link.collapsed:before {
    content: '\f107'; // angle down
}

Additionally add aria-expanded="false" to initialize the state, whether they start collapsed or not. Useful when using Bootstrap 3 & 4, you can now use [aria-expanded="false"] as a selector.

<a class="expedition-info-link" href="#expedition-info" data-toggle="collapse" aria-expanded="false">

.expedition-info-link[aria-expanded="false"]:before {
    content: '\f105'; // angle right
    font-family: FontAwesome;
}
.expedition-info-link[aria-expanded="true"]:before {
    content: '\f107'; // angle down
}

info on aria-expanded: https://getbootstrap.com/docs/4.0/components/collapse/#accessibility